bkui-vue 0.0.1-beta.38 → 0.0.1-beta.381

package/lib/search-select/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../directives"),require("../icon"),require("../popover"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../directives","../icon","../popover"],t);else{var n="object"==typeof exports?t(require("../shared"),require("vue"),require("../directives"),require("../icon"),require("../popover")):t(e["../shared"],e.vue,e["../directives"],e["../icon"],e["../popover"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(self,((e,t,n,r,i)=>(()=>{var a={7162:(e,t,n)=>{e.exports=n(5047)},5047:e=>{var t=function(e){"use strict";var t,n=Object.prototype,r=n.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",o=i.asyncIterator||"@@asyncIterator",l=i.toStringTag||"@@toStringTag";function u(e,t,n){return Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{u({},"")}catch(e){u=function(e,t,n){return e[t]=n}}function s(e,t,n,r){var i=t&&t.prototype instanceof m?t:m,a=Object.create(i.prototype),o=new C(r||[]);return a._invoke=function(e,t,n){var r=d;return function(i,a){if(r===h)throw new Error("Generator is already running");if(r===f){if("throw"===i)throw a;return V()}for(n.method=i,n.arg=a;;){var o=n.delegate;if(o){var l=L(o,n);if(l){if(l===p)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===d)throw r=f,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=h;var u=c(e,t,n);if("normal"===u.type){if(r=n.done?f:v,u.arg===p)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(r=f,n.method="throw",n.arg=u.arg)}}}(e,n,o),a}function c(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(e){return{type:"throw",arg:e}}}e.wrap=s;var d="suspendedStart",v="suspendedYield",h="executing",f="completed",p={};function m(){}function g(){}function _(){}var y={};u(y,a,(function(){return this}));var w=Object.getPrototypeOf,b=w&&w(w(N([])));b&&b!==n&&r.call(b,a)&&(y=b);var x=_.prototype=m.prototype=Object.create(y);function k(e){["next","throw","return"].forEach((function(t){u(e,t,(function(e){return this._invoke(t,e)}))}))}function E(e,t){function n(i,a,o,l){var u=c(e[i],e,a);if("throw"!==u.type){var s=u.arg,d=s.value;return d&&"object"==typeof d&&r.call(d,"__await")?t.resolve(d.__await).then((function(e){n("next",e,o,l)}),(function(e){n("throw",e,o,l)})):t.resolve(d).then((function(e){s.value=e,o(s)}),(function(e){return n("throw",e,o,l)}))}l(u.arg)}var i;this._invoke=function(e,r){function a(){return new t((function(t,i){n(e,r,t,i)}))}return i=i?i.then(a,a):a()}}function L(e,n){var r=e.iterator[n.method];if(r===t){if(n.delegate=null,"throw"===n.method){if(e.iterator.return&&(n.method="return",n.arg=t,L(e,n),"throw"===n.method))return p;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var i=c(r,e.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,p;var a=i.arg;return a?a.done?(n[e.resultName]=a.value,n.next=e.nextLoc,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,p):a:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,p)}function S(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function I(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function C(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(S,this),this.reset(!0)}function N(e){if(e){var n=e[a];if(n)return n.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var i=-1,o=function n(){for(;++i<e.length;)if(r.call(e,i))return n.value=e[i],n.done=!1,n;return n.value=t,n.done=!0,n};return o.next=o}}return{next:V}}function V(){return{value:t,done:!0}}return g.prototype=_,u(x,"constructor",_),u(_,"constructor",g),g.displayName=u(_,l,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===g||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,_):(e.__proto__=_,u(e,l,"GeneratorFunction")),e.prototype=Object.create(x),e},e.awrap=function(e){return{__await:e}},k(E.prototype),u(E.prototype,o,(function(){return this})),e.AsyncIterator=E,e.async=function(t,n,r,i,a){void 0===a&&(a=Promise);var o=new E(s(t,n,r,i),a);return e.isGeneratorFunction(n)?o:o.next().then((function(e){return e.done?e.value:o.next()}))},k(x),u(x,l,"Generator"),u(x,a,(function(){return this})),u(x,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){for(;t.length;){var r=t.pop();if(r in e)return n.value=r,n.done=!1,n}return n.done=!0,n}},e.values=N,C.prototype={constructor:C,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(I),!e)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var n=this;function i(r,i){return l.type="throw",l.arg=e,n.next=r,i&&(n.method="next",n.arg=t),!!i}for(var a=this.tryEntries.length-1;a>=0;--a){var o=this.tryEntries[a],l=o.completion;if("root"===o.tryLoc)return i("end");if(o.tryLoc<=this.prev){var u=r.call(o,"catchLoc"),s=r.call(o,"finallyLoc");if(u&&s){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(u){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return i(o.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var a=i;break}}a&&("break"===e||"continue"===e)&&a.tryLoc<=t&&t<=a.finallyLoc&&(a=null);var o=a?a.completion:{};return o.type=e,o.arg=t,a?(this.method="next",this.next=a.finallyLoc,p):this.complete(o)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),p},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),I(n),p}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var r=n.completion;if("throw"===r.type){var i=r.arg;I(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(e,n,r){return this.delegate={iterator:N(e),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=t),p}},e}(e.exports);try{regeneratorRuntime=t}catch(e){"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}},4061:e=>{"use strict";e.exports=n},6870:e=>{"use strict";e.exports=r},5537:e=>{"use strict";e.exports=i},4212:t=>{"use strict";t.exports=e},748:e=>{"use strict";e.exports=t}},o={};function l(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return a[e](n,n.exports,l),n.exports}l.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return l.d(t,{a:t}),t},l.d=(e,t)=>{for(var n in t)l.o(t,n)&&!l.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{"use strict";l.r(u),l.d(u,{BkSearchSelect:()=>j,default:()=>D});var e=l(4212),t=l(748),n=null,r=null;function i(e,t){void 0===t&&(t={});var n=document.createElement(e);return Object.keys(t).forEach((function(e){n[e]=t[e]})),n}function a(e,t,n){return(window.getComputedStyle(e,n||null)||{display:"none"})[t]}function o(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var t=e;t!==document;){if("none"===a(t,"display"))return{detached:!1,rendered:!1};t=t.parentNode}return{detached:!1,rendered:!0}}var s=0,c=null;function d(e,t){if(e.__resize_mutation_handler__||(e.__resize_mutation_handler__=v.bind(e)),!e.__resize_listeners__)if(e.__resize_listeners__=[],window.ResizeObserver){var n=e.offsetWidth,r=e.offsetHeight,l=new ResizeObserver((function(){(e.__resize_observer_triggered__||(e.__resize_observer_triggered__=!0,e.offsetWidth!==n||e.offsetHeight!==r))&&f(e)})),u=o(e),d=u.detached,m=u.rendered;e.__resize_observer_triggered__=!1===d&&!1===m,e.__resize_observer__=l,l.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){f(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(s||(c=function(e){var t=document.createElement("style");return t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(t),t}('.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}')),function(e){var t=a(e,"position");t&&"static"!==t||(e.style.position="relative"),e.__resize_old_position__=t,e.__resize_last__={};var n=i("div",{className:"resize-triggers"}),r=i("div",{className:"resize-expand-trigger"}),o=i("div"),l=i("div",{className:"resize-contract-trigger"});r.appendChild(o),n.appendChild(r),n.appendChild(l),e.appendChild(n),e.__resize_triggers__={triggers:n,expand:r,expandChild:o,contract:l},p(e),e.addEventListener("scroll",h,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}(e),e.__resize_rendered__=o(e).rendered,window.MutationObserver){var g=new MutationObserver(e.__resize_mutation_handler__);g.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=g}e.__resize_listeners__.push(t),s++}function v(){var e=o(this),t=e.rendered,n=e.detached;t!==this.__resize_rendered__&&(!n&&this.__resize_triggers__&&(p(this),this.addEventListener("scroll",h,!0)),this.__resize_rendered__=t,f(this))}function h(){var e,t,i=this;p(this),this.__resize_raf__&&(e=this.__resize_raf__,r||(r=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}).bind(window)),r(e)),this.__resize_raf__=(t=function(){var e,t,n,r,a,o,l=(n=(t=(e=i).__resize_last__).width,r=t.height,a=e.offsetWidth,o=e.offsetHeight,a!==n||o!==r?{width:a,height:o}:null);l&&(i.__resize_last__=l,f(i))},n||(n=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){return setTimeout(e,16)}).bind(window)),n(t))}function f(e){e&&e.__resize_listeners__&&e.__resize_listeners__.forEach((function(t){t.call(e,e)}))}function p(e){var t=e.__resize_triggers__,n=t.expand,r=t.expandChild,i=t.contract,a=i.scrollWidth,o=i.scrollHeight,l=n.offsetWidth,u=n.offsetHeight,s=n.scrollWidth,c=n.scrollHeight;i.scrollLeft=a,i.scrollTop=o,r.style.width=l+1+"px",r.style.height=u+1+"px",n.scrollLeft=s,n.scrollTop=c}var m=l(4061),g=l(6870),_=l(7162),y=l.n(_);function w(e,t,n,r){return new(n||(n=Promise))((function(i,a){function o(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,l)}u((r=r.apply(e,t||[])).next())}))}Object.create,Object.create;var b=l(5537),x=l.n(b);const k=(0,t.defineComponent)({name:"SearchSelectMenu",props:{list:{type:Array},hoverId:String,keyword:{type:String,default:""},multiple:{type:Boolean,default:!1},selected:{type:Array,default:function(){return[]}},conditions:{type:Array},footerBtns:{type:Array,default:function(){return[{id:"confirm",name:"确认"},{id:"cancel",name:"取消",disabled:!1}]}}},emits:["selectItem","selectCondition","footerClick"],setup:function(e,n){var r=n.emit;return{handleClick:function(e){r("selectItem",e)},handleClickCondition:function(e){r("selectCondition",e)},handleClickFooterBtn:function(e){r("footerClick",e)},filterList:(0,t.computed)((function(){var t,n;return(null===(t=e.list)||void 0===t?void 0:t.length)?(null===(n=e.keyword)||void 0===n?void 0:n.length)?e.list.filter((function(t){return t.name.toLocaleLowerCase().includes(e.keyword.toLocaleLowerCase())})):e.list:[]})),getSearchNode:function(n){var r;return(null===(r=n.value)||void 0===r?void 0:r.name)?[(0,t.createVNode)("span",{class:"menu-name"},[n.name,(0,t.createTextVNode)(":")]),n.value.name]:function(n){if(!n)return n;var r=e.keyword,i=r.length;if(!(null==r?void 0:r.trim().length)||!n.toLocaleLowerCase().includes(r.toLocaleLowerCase()))return n;var a=[],o=-1;return r=r.replace(/([.*/]{1})/gim,"\\$1"),n.replace(new RegExp("".concat(r),"igm"),(function(e,r){return 0===a.length&&0!==r?a.push(n.slice(0,r)):o>=0&&a.push(n.slice(o+e.length,r)),a.push((0,t.createVNode)("span",{class:"is-keyword"},[e])),o=r,e})),o>=0&&a.push(n.slice(o+i)),a.length?a:n}(n.name)}}},render:function(){var e,n,r,i=this;return(0,t.createVNode)("div",{class:"bk-search-select-menu"},[!!(null===(e=this.conditions)||void 0===e?void 0:e.length)&&(0,t.createVNode)("ul",{class:"menu-header"},[this.conditions.map((function(e){return(0,t.createVNode)("li",{key:e.id,class:"menu-header-item  ".concat(e.disabled?"is-disabled":""),onClick:function(){return!e.disabled&&i.handleClickCondition(e)}},[e.name])}))]),(0,t.createVNode)("ul",{class:"menu-content"},[null===(n=this.list)||void 0===n?void 0:n.map((function(e){return(0,t.createVNode)("li",{class:"menu-item ".concat(e.disabled?"is-disabled":""," ").concat(i.hoverId!==e.id||e.disabled?"":"is-hover"),key:e.id,id:e.id,tabindex:"-1",onClick:function(){return!e.disabled&&i.handleClick(e)}},[i.$slots.default?i.$slots.default({item:e,list:i.list,multiple:!!i.multiple,hoverId:i.hoverId,getSearchNode:i.getSearchNode}):(0,t.createVNode)(t.Fragment,null,[i.getSearchNode(e),i.multiple&&i.selected.includes(e.id)&&(0,t.createVNode)(g.Done,{class:"is-selected"},null)])])}))]),this.multiple&&(null===(r=this.footerBtns)||void 0===r?void 0:r.length)&&(0,t.createVNode)("div",{class:"menu-footer"},[this.footerBtns.map((function(e){return(0,t.createVNode)("span",{class:"menu-footer-btn ".concat(e.disabled?"is-disabled":""),key:e.id,onClick:function(){return!e.disabled&&i.handleClickFooterBtn(e)}},[e.name])}))])])}});function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function L(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var S;!function(e){e.ALL="all",e.NEEDKEY="need-key"}(S||(S={}));var I,C=Symbol("SEARCH_SLECT_PROVIDER_KEY"),N=function(){return(0,t.inject)(C)};!function(e){e.DEFAULT="default",e.EDIT="edit"}(I||(I={}));var V=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"default",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"|";E(this,e),this.searchItem=t,this.type=n,this.splitCode=r,this.values=[],this.id=t.id,this.name=t.name}var t,n;return t=e,(n=[{key:"multiple",get:function(){return!!this.searchItem.multiple}},{key:"placeholder",get:function(){return this.searchItem.placeholder||""}},{key:"children",get:function(){return this.searchItem.children||[]}},{key:"validate",get:function(){return!this.searchItem.noValidate}},{key:"inputInnerHtml",get:function(){var e;return this.isSpecialType()?this.name:"".concat(this.keyInnerHtml).concat((null===(e=this.values)||void 0===e?void 0:e.map((function(e){return e.name})).join(this.splitCode))||"")}},{key:"inputInnerText",get:function(){var e;return this.isSpecialType()?this.name:"".concat(this.keyInnerText).concat((null===(e=this.values)||void 0===e?void 0:e.map((function(e){return e.name})).join(this.splitCode))||"")}},{key:"keyInnerHtml",get:function(){return this.isSpecialType()?this.name:this.name?"".concat(this.name,": "):""}},{key:"keyInnerText",get:function(){return this.isSpecialType()?this.name:this.name?"".concat(this.name,": "):""}},{key:"isSpecialType",value:function(){return["text","condition"].includes(this.type)}},{key:"addValue",value:function(e){if(this.multiple){var t=this.values.findIndex((function(t){return t.id===e.id}));return t>-1?void this.values.splice(t,1):void this.values.push(e)}this.values=[e]}},{key:"toValue",value:function(){var e,t={id:this.id,name:this.name};return(null===(e=this.values)||void 0===e?void 0:e.length)&&(t.values=this.values.map((function(e){return{id:e.id,name:e.name}}))),this.type&&"default"!==this.type&&(t.type=this.type),t}},{key:"toValueKey",value:function(){return JSON.stringify(this.toValue())}},{key:"isInValueList",value:function(e){return this.children.some((function(t){return t.id===(null==e?void 0:e.id)}))}}])&&L(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();const z=(0,t.defineComponent)({name:"SearchSelectInput",directives:{clickoutside:m.clickoutside},props:{data:{type:Array,required:!0},showInputBefore:Boolean,showCondition:Boolean,clickOutside:Function,conditions:{type:Array,default:function(){return[]}},defautUsingItem:Object,mode:{type:String,default:I.DEFAULT},getMenuList:Function,validateValues:Function,valueBehavior:String},emits:["focus","add","delete"],setup:function(n,r){var i=r.emit,a=r.expose,o=(0,t.ref)(null),l=(0,t.ref)(null),u=(0,t.ref)(""),s=(0,t.ref)(!1),c=(0,t.ref)(!1),d=(0,t.ref)(!1),v=(0,t.ref)(n.defautUsingItem),h=(0,t.ref)(""),f=(0,t.ref)(!1),p=(0,e.debounce)(300,A),m=!1,g=(0,t.ref)([]),_=(0,t.ref)([]),b=N(),x=b.editKey,k=b.onValidate,E=b.valueSplitCode;function L(e){switch(e.code){case"ArrowDown":case"ArrowUp":C(e);break;case"Enter":case"NumpadEnter":!function(e){if(m){e.preventDefault();var t=_.value.find((function(e){return e.id===h.value}));t&&T(t)}}(e)}}function C(e){var t;e.preventDefault(),null===(t=o.value)||void 0===t||t.blur();for(var n=_.value.length,r=n,i=_.value.findIndex((function(e){return e.id===h.value}));r>=0;){i=(i="ArrowDown"===e.code?i+1:i-1)>n-1?0:i<0?n-1:i;var a=_.value[i];if(a&&!a.disabled){r=-1;var l=document.getElementById(a.id);return null==l||l.focus(),void(h.value=a.id)}r-=1}}function z(e){D(),e&&A()}function O(e){var t;return w(this,void 0,void 0,y().mark((function r(){var a,o,l,c;return y().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return null==e||e.preventDefault(),r.next=3,new Promise((function(e){return setTimeout(e,0)}));case 3:if(v.value){r.next=16;break}if(u.value&&n.valueBehavior!==S.NEEDKEY){r.next=6;break}return r.abrupt("return");case 6:return a={id:u.value,name:u.value},r.next=9,F(a);case 9:if(r.sent){r.next=12;break}return r.abrupt("return");case 12:return i("add",new V(a,"text",E.value)),u.value="",A(),r.abrupt("return");case 16:if(null==(o=v.value.values)?void 0:o.length){r.next=43;break}if(!(null===(t=u.value)||void 0===t?void 0:t.length)){r.next=41;break}if(!u.value.includes(E.value)){r.next=29;break}return l=u.value.split(E.value),r.next=23,F({id:u.value,name:u.value});case 23:if(r.sent){r.next=26;break}return r.abrupt("return");case 26:l.forEach((function(e){return v.value.addValue({id:e,name:e})})),r.next=36;break;case 29:return c={id:u.value,name:u.value},r.next=32,F(c);case 32:if(r.sent){r.next=35;break}return r.abrupt("return");case 35:v.value.addValue(c);case 36:return i("add",v.value),u.value="",v.value=null,D(!0),r.abrupt("return");case 41:return s.value=!0,r.abrupt("return");case 43:return r.next=45,F();case 45:if(r.sent){r.next=48;break}return r.abrupt("return");case 48:B();case 49:case"end":return r.stop()}}),r)})))}function T(e,t){var r,i,a,l;return w(this,void 0,void 0,y().mark((function s(){var c,f;return y().wrap((function(s){for(;;)switch(s.prev=s.next){case 0:if(!(null===(r=e.value)||void 0===r?void 0:r.id)){s.next=8;break}if((n.valueBehavior!==S.NEEDKEY||!e.value)&&n.validateValues){s.next=8;break}return(c=new V(Object.assign(Object.assign({},e),{id:null!==(i=e.realId)&&void 0!==i?i:e.id}),t,E.value)).addValue(e.value),B(c),n.valueBehavior===S.NEEDKEY&&h.value&&D(!0),h.value="",s.abrupt("return");case 8:if(v.value&&(null===(a=null==o?void 0:o.value)||void 0===a?void 0:a.innerText)){s.next=16;break}return v.value=new V(e,t,E.value),u.value="",(f="condition"===t)&&B(),d.value=f||!!v.value.children.length,D(n.valueBehavior===S.NEEDKEY&&!!h.value),s.abrupt("return");case 16:if("condition"!==(null===(l=v.value)||void 0===l?void 0:l.type)){s.next=20;break}return v.value=new V(e,t,E.value),B(),s.abrupt("return");case 20:return v.value.addValue(e),s.next=23,F(e);case 23:if(s.sent){s.next=26;break}return s.abrupt("return");case 26:v.value.multiple||B(),n.valueBehavior===S.NEEDKEY&&v.value.multiple&&D();case 28:case"end":return s.stop()}}),s)})))}function F(e){return w(this,void 0,void 0,y().mark((function t(){var r,i,a,o;return y().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(v.value){t.next=4;break}return t.next=3,j(null,[e]);case 3:case 8:return t.abrupt("return",t.sent);case 4:if(r=v.value,i=r.searchItem,a=r.validate,o=r.values,!a||"function"!=typeof n.validateValues){t.next=9;break}return t.next=8,j(i,e?[e]:o);case 9:return k(""),t.abrupt("return",!0);case 11:case"end":return t.stop()}}),t)})))}function j(e,t){var r;return w(this,void 0,void 0,y().mark((function i(){var a;return y().wrap((function(i){for(;;)switch(i.prev=i.next){case 0:return i.next=2,null===(r=n.validateValues)||void 0===r?void 0:r.call(n,null!=e?e:null,t).catch((function(){return!1}));case 2:if("string"!=typeof(a=i.sent)&&!1!==a){i.next=6;break}return k(a||"校验错误"),i.abrupt("return",!1);case 6:return k(""),i.abrupt("return",!0);case 8:case"end":return i.stop()}}),i)})))}function D(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];e&&(0,t.nextTick)().then((function(){A()})),c.value=!0,d.value=!0,s.value=!1;var n=setTimeout((function(){if(o.value){o.value.focus();var e=window.getSelection();0===e.focusOffset&&(e.selectAllChildren(o.value),e.collapseToEnd())}window.clearTimeout(n)}),0);i("focus",c.value)}function A(){var t,r,i,a,o;return w(this,void 0,void 0,y().mark((function l(){var s,c;return y().wrap((function(l){for(;;)switch(l.prev=l.next){case 0:if(s=[],"function"!=typeof n.getMenuList||void 0!==(null===(r=null===(t=v.value)||void 0===t?void 0:t.searchItem)||void 0===r?void 0:r.async)&&!0!==v.value.searchItem.async){l.next=9;break}return f.value=!0,l.next=5,n.getMenuList(null===(i=v.value)||void 0===i?void 0:i.searchItem,u.value).catch((function(){return[]}));case 5:s=l.sent,f.value=!1,l.next=10;break;case 9:(null==v?void 0:v.value)?"condition"===v.value.type?s=n.conditions:(null===(o=v.value.values)||void 0===o?void 0:o.length)&&!v.value.multiple&&n.mode!==I.EDIT||(s=v.value.children.filter((function(e){return e.name.toLocaleLowerCase().includes(u.value.toLocaleLowerCase())}))):(null===(a=u.value)||void 0===a?void 0:a.length)?n.data.filter((function(e){return!e.isSelected})).forEach((function(t){var n,r;t.name.toLocaleLowerCase().includes(u.value.toLocaleLowerCase())?(s.push(t),null===(n=t.children)||void 0===n||n.forEach((function(n){s.push(Object.assign(Object.assign({},t),{realId:t.id,id:(0,e.random)(10),value:n}))})),s.push(Object.assign(Object.assign({},t),{realId:t.id,id:(0,e.random)(10),value:{id:u.value,name:u.value}}))):(null===(r=t.children)||void 0===r||r.forEach((function(n){n.name.toLocaleLowerCase().includes(u.value.toLocaleLowerCase())&&s.push(Object.assign(Object.assign({},t),{realId:t.id,id:(0,e.random)(10),value:n}))})),s.push(Object.assign(Object.assign({},t),{value:{id:u.value,name:u.value}})))})):s=n.data.filter((function(e){return!e.isSelected})).slice();case 10:_.value=s,n.valueBehavior===S.NEEDKEY&&(c=s.find((function(e){return!e.disabled})))&&(!h.value||h.value&&!s.some((function(e){return e.id===h.value})))&&(h.value=c.id);case 12:case"end":return l.stop()}}),l)})))}function B(e){i("add",null!=e?e:v.value),v.value=null,u.value="",D(n.valueBehavior===S.NEEDKEY)}function M(){var e=o.value.innerText;"\n"===e[e.length-1]||"\r"===e[0]?(q(e.slice(0,-1)),M()):"\n"!==e[0]&&"\r"!==e[0]||(q(e.slice(1)),M())}function q(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";o.value&&(o.value.innerHTML=t||(null===(e=v.value)||void 0===e?void 0:e.inputInnerHtml)||"")}return(0,t.watch)(x,(function(){n.mode===I.DEFAULT&&x.value&&(d.value=!1)})),(0,t.watchEffect)((function(){u.value||q()}),{flush:"pre"}),(0,t.watch)([_,d],(function(){var e;(null===(e=_.value)||void 0===e?void 0:e.some((function(e){return!e.disabled})))&&d.value?m||(n.valueBehavior===S.NEEDKEY?h.value=_.value.find((function(e){return!e.disabled})).id:h.value="",m=!0,document.addEventListener("keydown",L)):(document.removeEventListener("keydown",L),m=!1,n.valueBehavior!==S.NEEDKEY&&(h.value=""))})),a({handleInputFocus:z,isFocus:c}),{popoverRef:l,inputRef:o,keyword:u,loading:f,remoteMenuList:g,menuList:_,menuHoverId:h,isFocus:c,usingItem:v,showPopover:d,showNoSelectValueError:s,debounceSetMenuList:p,documentArrowEvent:C,handleClickOutside:function(e){var t,r;!(null===(t=l.value)||void 0===t?void 0:t.contains(e.target))&&(null===(r=n.clickOutside)||void 0===r?void 0:r.call(n,e.target,l.value))&&(d.value=!1,c.value=!1,i("focus",c.value))},handleInputFocus:z,handleInputChange:function(e){var t,n,r,i,a,l,s;M();var c=e.target.innerText;if(/(\r|\n)/gm.test(c)||/\s{2}/gm.test(c))e.preventDefault(),c=c.replace(/(\r|\n)/gm,E.value).replace(/\s{2}/gm,""),o.value.innerText=c,D(),u.value=c.replace((null===(t=v.value)||void 0===t?void 0:t.keyInnerText)||"","").trim(),p();else if(!u.value&&c.length<((null===(r=null===(n=v.value)||void 0===n?void 0:n.inputInnerText)||void 0===r?void 0:r.length)||1)){var d=c.replace(" "," ").replace((null===(i=v.value)||void 0===i?void 0:i.keyInnerText.replace(" "," ").trim())||"","").trim();!d&&(null==c?void 0:c.length)||(v.value=null),u.value=d?c:"",p()}else(null===(l=null===(a=v.value)||void 0===a?void 0:a.values)||void 0===l?void 0:l.length)||(u.value=c.replace(" "," ").replace((null===(s=v.value)||void 0===s?void 0:s.keyInnerText.replace(" "," "))||"","").trim(),D(),p())},handleInputKeyup:function(e){switch(e.code){case"Enter":case"NumpadEnter":if(n.valueBehavior===S.NEEDKEY&&_.value.some((function(e){return e.id===h.value})))return;O(e);break;case"Backspace":!function(){var e,n;if(!v.value&&!u.value)return i("delete"),void(0,t.nextTick)(A);if(null===(e=v.value)||void 0===e?void 0:e.values.length){if((null===(n=v.value)||void 0===n?void 0:n.multiple)||v.value.isInValueList(v.value.values[0]))return v.value.values.splice(-1,1),u.value="",void D()}else u.value||(v.value=null,u.value="",A());k("")}();default:s.value=!1}},handleSelectItem:T,handleSelectCondtionItem:function(e){T(e,"condition")},handleMenuFooterClick:function(e){switch(e.id){case"confirm":O();break;case"cancel":v.value.values=[],d.value=!1}}}},render:function(){var e,n,r=this,i=this.usingItem||{},a=i.multiple,o=i.values,l=i.placeholder,u=i.inputInnerHtml,s=!(null===(e=this.keyword)||void 0===e?void 0:e.length)&&!(null==o?void 0:o.length)&&l,c=this.loading||this.showNoSelectValueError||this.showPopover&&!!(null===(n=this.menuList)||void 0===n?void 0:n.length),d=!this.usingItem&&this.showCondition,v=Object.assign({},this.$slots.menu?{default:function(e){var t,n;return null===(n=(t=r.$slots).menu)||void 0===n?void 0:n.call(t,e)}}:{});return(0,t.createVNode)(x(),{trigger:"manual",theme:"light",placement:"bottom-start",arrow:!1,disableOutsideClick:!0,isShow:c},{default:function(){var e;return(0,t.withDirectives)((0,t.createVNode)("div",{ref:"inputRef",class:{"div-input":!0,"input-before":r.showInputBefore&&!(null===(e=r.keyword)||void 0===e?void 0:e.length),"input-after":s},contenteditable:!0,"data-placeholder":u||r.keyword?"":"请选择","data-tips":l||"",spellcheck:"false",onFocus:r.handleInputFocus,onInput:r.handleInputChange,onKeydown:r.handleInputKeyup},null),[[(0,t.resolveDirective)("clickoutside"),r.handleClickOutside]])},content:function(){var e;return r.loading?(0,t.createVNode)("div",null,[(0,t.createTextVNode)("加载中...")]):r.showNoSelectValueError?(0,t.createVNode)("div",null,[(0,t.createTextVNode)("包含键值的过滤查询必须有一个值")]):(null===(e=r.menuList)||void 0===e?void 0:e.length)?(0,t.createVNode)("div",{ref:"popoverRef",class:"bk-search-select-popover"},[(0,t.createVNode)(k,{list:r.menuList,keyword:r.keyword,multiple:!!a,hoverId:r.menuHoverId,selected:(null==o?void 0:o.map((function(e){return e.id})))||[],conditions:d?r.conditions:[],onSelectItem:r.handleSelectItem,onSelectCondition:r.handleSelectCondtionItem,onFooterClick:r.handleMenuFooterClick},Object.assign({},v))]):void 0}})}}),O=(0,t.defineComponent)({name:"SearchSelected",props:{data:{type:Array,required:!0},selectedList:{type:Array,required:!0},overflowIndex:{type:Number,default:-1},conditions:{type:Array,default:function(){return[]}},getMenuList:Function,validateValues:Function,valueBehavior:String},emits:["delete"],setup:function(e,n){var r=n.emit,i=(0,t.ref)(null),a=N(),o=a.onEditClick,l=a.onEditEnter,u=a.onEditBlur,s=a.editKey,c=a.valueSplitCode;return{inputRef:i,editKey:s,copySeletedItem:function(e){var t=new V(e.searchItem,e.type,c.value);return t.values=e.values.slice(),t},handleDeleteSelected:function(e){r("delete",e)},handleEditSeleted:function(e,t,n){e.preventDefault(),e.stopPropagation(),o(t,n),setTimeout((function(){return i.value.handleInputFocus()}),200)},handleInputOutside:function(){return!0},handleAddSelected:function(e,t){l(e,t)},handleInputFocus:function(e){e||u()}}},render:function(){var e=this,n=function(n,r){return e.editKey==="".concat(n.id,"_").concat(r)?(0,t.createVNode)("div",{class:"selected-input",key:e.editKey.toString()},[(0,t.createVNode)(z,{ref:"inputRef",key:e.editKey.toString(),mode:I.EDIT,data:e.data,showCondition:!1,conditions:e.conditions,defautUsingItem:e.copySeletedItem(n),clickOutside:e.handleInputOutside,getMenuList:e.getMenuList,validateValues:e.validateValues,valueBehavior:e.valueBehavior,onAdd:function(t){return e.handleAddSelected(t,r)},onFocus:e.handleInputFocus},null)]):(0,t.createVNode)("li",{class:"search-container-selected ".concat((e.overflowIndex>=0?r<e.overflowIndex:r>=0)?"":"hidden-selected"),key:"".concat(n.id,"_").concat(r)},[(0,t.createVNode)("span",{class:"selected-name",onClick:function(t){return e.handleEditSeleted(t,n,r)}},[n.inputInnerText]),(0,t.createVNode)(g.Error,{class:"selected-clear",onClick:function(){return e.handleDeleteSelected(r)}},null)])};return(0,t.createVNode)(t.Fragment,null,[this.selectedList.map((function(r,i){return[e.overflowIndex>=0&&i===e.overflowIndex&&(0,t.createVNode)("div",{class:"search-container-selected overflow-selected"},[(0,t.createTextVNode)("+"),e.selectedList.length-e.overflowIndex]),n(r,i)]}))])}});var T={data:{type:Array,default:function(){return[]}},modelValue:{type:Array,default:function(){return[]}},shrink:{type:Boolean,default:!0},maxHeight:{type:Number,default:120},minHeight:{type:Number,default:26},conditions:{type:Array,default:function(){return[{id:"or",name:"或"},{id:"and",name:"且"}]}},clearable:{type:Boolean,default:!0},getMenuList:Function,validateValues:Function,valueSplitCode:{type:String,default:"|"},uniqueSelect:{type:Boolean,default:!1},valueBehavior:{type:String,default:S.ALL,validator:function(e){return[S.ALL,S.NEEDKEY].includes(e)}}};const F=(0,t.defineComponent)({name:"SearchSelect",directives:{clickoutside:m.clickoutside},props:T,emits:["update:modelValue"],setup:function(n,r){var i,a=r.emit,o=(0,t.ref)(null),l=(0,t.ref)(null),u=(0,t.ref)(!1),v=(0,t.ref)([]),f=(0,t.ref)(-1),p=(0,e.debounce)(32,k),m=(0,t.ref)(""),g=(0,t.ref)(""),_=(0,t.computed)((function(){return n.valueSplitCode})),y=(0,t.shallowRef)([]);function w(e,t){m.value="".concat(e.id,"_").concat(t)}function b(e,t){var n=v.value.slice();n.splice(t,1,e),a("update:modelValue",n.map((function(e){return e.toValue()}))),m.value=""}function x(e){g.value=e||""}function k(){if(u.value||v.value.length<1)f.value=-1;else{for(var e=l.value.querySelector(".bk-search-select-container"),t=l.value.querySelector(".search-container").clientWidth-6-2,r=e.querySelectorAll(".search-container-selected:not(.overflow-selected)"),i=0,a=0,o=0;0===a&&i<=t-40&&o<=r.length-1;){var s=r[o];if(s.clientHeight>n.minHeight)return void(f.value=o);(i+=s?s.clientWidth+6:0)>=t-40&&(a=o),o+=1}a===r.length-1&&i<=t?f.value=-1:f.value=i>=t-40?a:a-1}}return(0,t.watch)((function(){return n.data}),(function(){var e;y.value=JSON.parse(JSON.stringify(n.data)),null===(e=y.value)||void 0===e||e.forEach((function(e){e.isSelected=n.uniqueSelect&&!!n.modelValue.some((function(t){return t.id===e.id}))}))}),{immediate:!0}),(0,t.watch)((function(){return n.modelValue}),(function(e){var t,r;if(!(null==e?void 0:e.length))return v.value=[],void(null===(t=y.value)||void 0===t||t.forEach((function(e){e.isSelected=!1})));var i=[];e.forEach((function(e){var t,r=v.value.find((function(t){return t.id===e.id&&t.name===e.name}));if((null==r?void 0:r.toValueKey())===JSON.stringify(e))r.values=e.values||[],i.push(r);else{var a=n.data.find((function(t){return t.id===e.id})),o="default";a||(a=n.conditions.find((function(t){return t.id===e.id})))&&(o="condition"),a||(null===(t=e.values)||void 0===t?void 0:t.length)||(o="text");var l=new V(a||e,o,_.value);l.values=e.values||[],i.push(l)}})),v.value=i,null===(r=y.value)||void 0===r||r.forEach((function(e){e.isSelected=n.uniqueSelect&&!!i.some((function(t){return t.id===e.id}))}))}),{immediate:!0,deep:!0}),(0,t.onMounted)((function(){d(l.value.querySelector(".bk-search-select-container"),p)})),(0,t.onBeforeUnmount)((function(){!function(e,t){var n=e.__resize_listeners__;if(n){if(t&&n.splice(n.indexOf(t),1),!n.length||!t){if(e.detachEvent&&e.removeEventListener)return e.detachEvent("onresize",e.__resize_legacy_resize_handler__),void document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",h),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--s&&c&&c.parentNode.removeChild(c)}}(l.value.querySelector(".bk-search-select-container"),p)})),i={onEditClick:w,onEditEnter:b,onEditBlur:function(){m.value="",x("")},onValidate:x,editKey:m,valueSplitCode:_},(0,t.provide)(C,i),{inputRef:o,wrapRef:l,isFocus:u,copyData:y,selectedList:v,overflowIndex:f,validateStr:g,splitCode:_,onEditClick:w,onEditEnter:b,handleWrapClick:function(){m.value||o.value.handleInputFocus()},handleInputFocus:function(e){e&&(f.value=-1),u.value=e},handleResize:k,handleClearAll:function(){v.value=[],f.value=-1,a("update:modelValue",[])},handleInputOutside:function(e){var t;return!(null===(t=l.value)||void 0===t?void 0:t.contains(e))},handleAddSelected:function(e){var t=v.value.slice();t.push(e),x(""),a("update:modelValue",t.map((function(e){return e.toValue()})))},handleDeleteSelected:function(e){var t=v.value.slice();t.splice("number"==typeof e?e:v.value.length-1,1),x(""),a("update:modelValue",t.map((function(e){return e.toValue()})))}}},render:function(){var e,n,r=this,i="".concat(!this.shrink||this.isFocus?this.maxHeight:this.minHeight,"px"),a=!!this.selectedList.length&&"condition"!==this.selectedList.slice(-1)[0].type,o=Object.assign({},this.$slots.menu?{menu:function(e){var t,n;return null===(n=(t=r.$slots).menu)||void 0===n?void 0:n.call(t,e)}}:{});return(0,t.createVNode)("div",{class:"bk-search-select",ref:"wrapRef"},[(0,t.createVNode)("div",{class:{"bk-search-select-container":!0,"is-focus":this.isFocus},onClick:this.handleWrapClick},[(0,t.createVNode)("div",{class:"search-prefix"},[null===(n=(e=this.$slots).prepend)||void 0===n?void 0:n.call(e)]),(0,t.createVNode)("div",{class:"search-container",style:{maxHeight:i}},[(0,t.createVNode)(O,{data:this.copyData,conditions:this.conditions,selectedList:this.selectedList,overflowIndex:this.overflowIndex,getMenuList:this.getMenuList,validateValues:this.validateValues,valueBehavior:this.valueBehavior,onDelete:this.handleDeleteSelected},Object.assign({},o)),(0,t.createVNode)("div",{class:"search-container-input"},[(0,t.createVNode)(z,{ref:"inputRef",data:this.copyData,showInputBefore:!this.selectedList.length,showCondition:a,conditions:this.conditions,clickOutside:this.handleInputOutside,getMenuList:this.getMenuList,validateValues:this.validateValues,valueBehavior:this.valueBehavior,onAdd:this.handleAddSelected,onDelete:this.handleDeleteSelected,onFocus:this.handleInputFocus},Object.assign({},o))])]),(0,t.createVNode)("div",{class:"search-nextfix"},[this.clearable&&!!this.selectedList.length&&(0,t.createVNode)(g.Close,{class:"search-clear",onClick:this.handleClearAll},null),this.$slots.append?this.$slots.append():(0,t.createVNode)(g.Search,{class:"search-nextfix-icon ".concat(this.isFocus?"is-focus":"")},null)])]),!!this.validateStr.length&&(0,t.createVNode)("div",{class:"bk-search-select-tips"},[this.$slots.validate?this.$slots.validate():(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(g.ExclamationCircleShape,{class:"select-tips"},null),this.validateStr||""])])])}});var j=(0,e.withInstall)(F);const D=j})(),u})()));

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

@@ -0,0 +1,89 @@
+import { PropType, Ref } from 'vue';
+import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, SearchInputMode, SearchItemType, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+declare const _default: 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<SearchInputMode>;
+        default: SearchInputMode;
+    };
+    getMenuList: PropType<GetMenuListFunc>;
+    validateValues: PropType<ValidateValuesFunc>;
+    valueBehavior: PropType<ValueBehavior>;
+}, {
+    popoverRef: Ref<HTMLDivElement>;
+    inputRef: Ref<HTMLDivElement>;
+    keyword: Ref<string>;
+    loading: Ref<boolean>;
+    remoteMenuList: Ref<{
+        id: string;
+        name: string;
+        disabled?: boolean;
+        realId?: string;
+        value?: {
+            name: string;
+            id: string;
+            realId?: string;
+            isSelected?: boolean;
+        };
+        isSelected?: boolean;
+    }[]>;
+    menuList: Ref<ISearchItem[]>;
+    menuHoverId: Ref<string>;
+    isFocus: Ref<boolean>;
+    usingItem: Ref<SelectedItem>;
+    showPopover: Ref<boolean>;
+    showNoSelectValueError: 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: 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<SearchInputMode>;
+        default: SearchInputMode;
+    };
+    getMenuList: PropType<GetMenuListFunc>;
+    validateValues: PropType<ValidateValuesFunc>;
+    valueBehavior: PropType<ValueBehavior>;
+}>> & {
+    onFocus?: (...args: any[]) => any;
+    onAdd?: (...args: any[]) => any;
+    onDelete?: (...args: any[]) => any;
+}, {
+    mode: SearchInputMode;
+    conditions: ICommonItem[];
+    showInputBefore: boolean;
+    showCondition: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,83 @@
+import { PropType, VNode } from 'vue';
+import { ICommonItem, IMenuFooterItem } from './utils';
+declare const _default: import("vue").DefineComponent<{
+    list: {
+        type: PropType<ICommonItem[]>;
+    };
+    hoverId: StringConstructor;
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    conditions: {
+        type: PropType<ICommonItem[]>;
+    };
+    footerBtns: {
+        type: PropType<IMenuFooterItem[]>;
+        default: () => ({
+            id: string;
+            name: string;
+            disabled?: undefined;
+        } | {
+            id: string;
+            name: string;
+            disabled: boolean;
+        })[];
+    };
+}, {
+    handleClick: (item: ICommonItem) => void;
+    handleClickCondition: (item: ICommonItem) => void;
+    handleClickFooterBtn: (item: IMenuFooterItem) => void;
+    filterList: import("vue").ComputedRef<ICommonItem[]>;
+    getSearchNode: (item: ICommonItem) => string | (string | VNode)[];
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectItem" | "selectCondition" | "footerClick")[], "selectItem" | "selectCondition" | "footerClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    list: {
+        type: PropType<ICommonItem[]>;
+    };
+    hoverId: StringConstructor;
+    keyword: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selected: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    conditions: {
+        type: PropType<ICommonItem[]>;
+    };
+    footerBtns: {
+        type: PropType<IMenuFooterItem[]>;
+        default: () => ({
+            id: string;
+            name: string;
+            disabled?: undefined;
+        } | {
+            id: string;
+            name: string;
+            disabled: boolean;
+        })[];
+    };
+}>> & {
+    onSelectItem?: (...args: any[]) => any;
+    onSelectCondition?: (...args: any[]) => any;
+    onFooterClick?: (...args: any[]) => any;
+}, {
+    multiple: boolean;
+    selected: string[];
+    keyword: string;
+    footerBtns: IMenuFooterItem[];
+}>;
+export default _default;

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

@@ -0,0 +1,424 @@
+/* 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 0 0 6px 0;
+}
+.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;
+}
+.bk-search-select {
+  position: relative;
+  z-index: 9;
+  height: 32px;
+  overflow: inherit;
+}
+.bk-search-select .focus {
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3a84ff !important;
+}
+.bk-search-select .div-input {
+  height: 100%;
+  padding: 5px 0;
+  line-height: 20px;
+  word-break: break-all;
+  flex: 1 1 auto;
+}
+.bk-search-select .div-input:focus {
+  outline: none;
+}
+.bk-search-select-container {
+  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;
+}
+.bk-search-select-container.is-focus {
+  overflow: auto;
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3a84ff !important;
+}
+.bk-search-select-container .search-prefix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.bk-search-select-container .search-container {
+  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;
+}
+.bk-search-select-container .search-container-selected {
+  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;
+}
+.bk-search-select-container .search-container-selected.hidden-selected {
+  visibility: hidden;
+}
+.bk-search-select-container .search-container-selected.overflow-selected {
+  padding-right: 8px;
+}
+.bk-search-select-container .search-container-selected:hover {
+  background: #dcdee5;
+}
+.bk-search-select-container .search-container-selected:hover .selected-clear {
+  color: #63656e;
+}
+.bk-search-select-container .search-container-selected .selected-name {
+  display: inline-block;
+  margin-right: 20px;
+  word-break: break-all;
+}
+.bk-search-select-container .search-container-selected .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;
+}
+.bk-search-select-container .search-container-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;
+}
+.bk-search-select-container .search-container-input .input-before:before {
+  color: #c4c6cc;
+  content: attr(data-placeholder);
+}
+.bk-search-select-container .search-container-input .input-after:after {
+  padding-left: 2px;
+  color: #c4c6cc;
+  content: attr(data-tips);
+}
+.bk-search-select-container .search-container .selected-input {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 40px;
+  padding: 0 10px;
+  margin-top: -4px;
+  color: #63656e;
+  border: none;
+  align-items: center;
+}
+.bk-search-select-container .search-nextfix {
+  color: #c4c6cc;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.bk-search-select-container .search-nextfix .search-clear {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  font-size: 12px;
+  color: #c4c6cc;
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-container .search-nextfix .search-clear:hover {
+  color: #979ba5;
+  cursor: pointer;
+}
+.bk-search-select-container .search-nextfix .search-nextfix-icon {
+  display: flex;
+  margin-right: 8px;
+  font-size: 16px;
+  transition: color 0.2s linear;
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-container .search-nextfix .search-nextfix-icon.is-focus {
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3a84ff !important;
+}
+.bk-search-select-container::-webkit-scrollbar {
+  width: 3px;
+  height: 5px;
+}
+.bk-search-select-container::-webkit-scrollbar-thumb {
+  background: #e6e9ea;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
+.bk-search-select-tips {
+  display: flex;
+  margin-top: 5px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #ea3636;
+  align-items: center;
+}
+.bk-search-select-tips .select-tips {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  overflow: hidden;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: #63656e;
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-list-mixin {
+  display: flex;
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-item-mixin {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-item-mixin:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-disabled-mixin {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-disabled-mixin:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-header {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #c4c6cc;
+}
+.bk-search-select-menu .menu-header-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-header-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-header-item.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-header-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: 240px;
+  overflow: auto;
+}
+.bk-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;
+  white-space: pre;
+}
+.bk-search-select-menu .menu-content .menu-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
+.bk-search-select-menu .menu-content .menu-item .is-selected {
+  display: flex;
+  width: 22px;
+  height: 22px;
+  margin-left: auto;
+  overflow: hidden;
+  font-size: 22px;
+  font-weight: bold;
+  color: #3a84ff;
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover {
+  color: #3a84ff;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover .menu-name {
+  color: #3a84ff;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled .menu-name {
+  color: #c4c6cc;
+}
+.bk-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;
+}
+.bk-search-select-menu .menu-footer {
+  display: flex;
+  width: 100%;
+  height: 32px;
+  border-top: 1px solid #dcdee5;
+  align-items: center;
+}
+.bk-search-select-menu .menu-footer-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.bk-search-select-menu .menu-footer-btn:first-child {
+  border-right: 1px solid #dcdee5;
+}
+.bk-search-select-menu .menu-footer-btn:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-popover {
+  margin: -7px -14px;
+}