@scvzerng/element-plus-search-vue2 0.0.1 → 0.0.3

package/dist/ElementPlusSearch.umd.js

@@ -1 +1 @@
-(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("lodash-unified"),require("vue"),require("@element-plus/icons-vue"),require("@scvzerng/icons")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@element-plus/icons-vue","@scvzerng/icons"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.ElementPlusSearch={},f.lodashUnified,f.vue,f.iconsVue,f.icons))})(this,(function(f,p,e,S,N){"use strict";const T={class:"tags-scroll-container"},L=["innerHTML"],B=e.defineComponent({name:"SearchTags",__name:"SearchTagsRender",props:{tags:{}},setup(n){const t=e.ref(),r=()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},o=()=>{t.value.scrollBy({left:200,behavior:"smooth"})};return(s,i)=>{const m=e.resolveComponent("el-icon"),d=e.resolveComponent("el-tag");return e.openBlock(),e.createElementBlock("div",T,[e.createVNode(d,{type:"info",class:"scroll-left-bar",onClick:r},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(S.ArrowLeft))]),_:1}),i[0]||(i[0]=e.createElementVNode("i",{class:"el-icon-arrow-left"},null,-1))]),_:1}),e.createElementVNode("div",{ref_key:"scrollContainer",ref:t,class:"search-tags"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tags,u=>(e.openBlock(),e.createBlock(d,{class:"search-tag",onClose:()=>u.clean(),closable:!u.required,type:u.required?"primary":"info",key:u.field},{default:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(u.label),1),i[1]||(i[1]=e.createTextVNode("： ",-1)),e.createElementVNode("span",{innerHTML:u.valueText},null,8,L)]),_:2},1032,["onClose","closable","type"]))),128))],512),e.createVNode(d,{type:"info",class:"scroll-right-bar",onClick:o},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(S.ArrowRight))]),_:1})]),_:1})])}}}),k=6;class E{field;label;value;required;index;visible;span;initValue;tagFilter;render;transform;constructor(t,r){this.field=t.field,this.label=t.label,this.value=t.initValue,this.required=t.required,this.initValue=t.initValue,this.index=r,this.visible=t.visible??!0,this.span=t.span??k,this.render=t.render,this.tagFilter=t.tagFilter,this.transform=t.transform}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}}class g{field;span;index;visible;constructor(t,r,o,s){this.field=t,this.span=r,this.index=o,this.visible=s}static fromSearchItem(t,r){return new g(t.field,t.span,r??t.index,t.visible)}static formSearchConfig(t,r){return new g(t.field,t.span??k,r??t,t.visible??!0)}static fromString(t){const[r,o,s,i]=t.split("_");return new g(o,Number(s),Number(r),!!i)}toString(){return`${this.index}_${this.field}_${this.span}_${this.visible}`}merge(t){this.span=t.span,this.index=t.index,this.visible=t.visible}}const b=n=>`searches_layouts_${n}`;class A{id;state;itemLayouts;initialLayouts;constructor(t,r){this.id=t.id,this.initialLayouts=r,this.state=t,this.itemLayouts=p.keyBy(t.items.map(g.fromSearchItem),o=>o.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const t=localStorage.getItem(b(this.id));t&&t.split(",").forEach(r=>{const o=g.fromString(r),s=this.itemLayouts[o.field];s&&s.merge(o)})}sync(t,r){if(t.length!==Object.keys(this.itemLayouts).length)throw new Error("同步布局字段数量不一致");t.forEach((o,s)=>{const i=this.itemLayouts[o];i.index=s,i.visible=r.has(o)})}persistent(){localStorage.setItem(b(this.id),Object.values(this.itemLayouts).map(t=>t.toString()).join(",")),this.state.updateTags()}reset(){this.initialLayouts.forEach(t=>{const r=this.itemLayouts[t.field];r&&r.merge(t)})}}const q=[{isApply(n){return n.contains("el-radio-group")},getText(n){return n.querySelector(".is-active")?.querySelector("input")?.value}},{isApply(n){return n.contains("el-checkbox-group")},getText(n){const t=Array.from(n.querySelectorAll(".el-checkbox__input.is-checked")??[]).map(r=>r.querySelector("input")?.value).filter(r=>r);return t.length===1?t[0]:`${t[0]} 等${t.length}条`}},{isApply(n){return n.contains("el-input")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-input-number")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-select")},getText(n,t){const r=n.querySelectorAll(".el-select__tags-text");return r.length>0?t.value.length>1?`${r[0].textContent} 等${t.value.length}条`:r[0].textContent:n.querySelector(".el-select__placeholder")?.innerHTML}},{isApply(n){return n.contains("el-cascader")},getText(n){return n.querySelector("input")?.value}},{isApply(n){return n.contains("el-switch")},getText(n){return n.querySelector(".is-active").innerHTML}},{isApply(n){return n.contains("el-slider")},getText(n,t){return t.value}},{isApply(n){return n.contains("el-date-editor")},getText(n,t){return t.value?t.value.join(" ~ "):t.value}}];class V{id;field;value;label;valueText;required;item;state;constructor(t,r){this.id=`#${t.id}-${r.field}`,this.state=t,this.field=r.field,this.value=r.value,this.label=r.label,this.item=r,this.required=r.required??!1,this.updateValueText()}static hasValue(t){return p.isNumber(t.value)||p.isBoolean(t.value)?!0:!p.isEmpty(t.value)}updateValueText(){const t=document.querySelector(this.id);if(t.children.length!==1)throw new Error("holder children length is not 1");const r=t.children[0],o=q.find(s=>s.isApply(r.classList));o&&(this.valueText=o.getText(r,this))}async clean(){this.item.clean(),await this.state.doSearch()}}class ${constructor(t,r,o){this.id=t,this.id=t,this.items=r.map((s,i)=>new E(s,i)),this.config=e.reactive(new A(this,r.map((s,i)=>g.formSearchConfig(s,i)))),this.sourceSearchable=r,this.searching=!1,this.searchCallback=o,this.tags=[]}items;config;searching;tags;searchCallback;sourceSearchable;updateTags(){this.tags=this.items.filter(t=>t.tagFilter?t.tagFilter(t.value):V.hasValue(t)).map(t=>new V(this,t)).sort((t,r)=>this.config.itemLayouts[t.field].index-this.config.itemLayouts[r.field].index)}getSearchObject(t){return x.from(this.items).toCondition(t)}async doSearch(){if(!this.searching)try{this.searching=!0,await this.searchCallback(this.getSearchObject()),this.updateTags()}finally{this.searching=!1}}async reset(t){this.items.forEach(r=>r.reset()),t&&await this.doSearch()}}const D=({search:n})=>n.render(n),R=()=>{const n=e.shallowRef(),t=e.ref(),r=e.ref([]),o=e.ref(!1),s=e.ref(),i=e.ref([]),m=e.ref(300),d=a=>{n.value=a,r.value=[{label:"全部",id:"all",children:n.value.items.sort((h,c)=>a.config.itemLayouts[h.field].index-a.config.itemLayouts[c.field].index).map(h=>({label:h.label,id:h.field}))}],s.value=p.chain(a.config.itemLayouts).pickBy(h=>h.visible).keys().value()};return{treeRef:t,visible:o,snapshot:r,defaultCheckedKeys:s,drawerWidth:m,updateSnapshot:d,show:a=>{d(a),o.value=!0},save:()=>{n.value.config.sync(r.value[0].children.map(a=>a.id),new Set(t.value.getCheckedKeys())),n.value.config.persistent()},reset:()=>{n.value.config.reset(),d(n.value)},keepSelection:()=>{i.value=t.value.getCheckedKeys()},restoreSelection:()=>{t.value.setCheckedKeys(i.value),i.value=[]},allowDrop:(a,h,c)=>c!=="inner"}},j=e.defineComponent({__name:"SearchSettingsDrawer",setup(n,{expose:t}){const{treeRef:r,visible:o,snapshot:s,drawerWidth:i,defaultCheckedKeys:m,show:d,allowDrop:u,keepSelection:C,restoreSelection:y,save:l,reset:_}=R();return t({show:d}),(w,a)=>{const h=e.resolveComponent("el-tree"),c=e.resolveComponent("el-button"),G=e.resolveComponent("el-drawer");return e.openBlock(),e.createBlock(G,{class:"search-setting",size:e.unref(i),title:"搜索项配置",modelValue:e.unref(o),"onUpdate:modelValue":a[0]||(a[0]=W=>e.isRef(o)?o.value=W:null)},{footer:e.withCtx(()=>[e.createVNode(c,{onClick:e.unref(_)},{default:e.withCtx(()=>[...a[1]||(a[1]=[e.createTextVNode("重置",-1)])]),_:1},8,["onClick"]),e.createVNode(c,{type:"primary",onClick:e.unref(l)},{default:e.withCtx(()=>[...a[2]||(a[2]=[e.createTextVNode("保存",-1)])]),_:1},8,["onClick"])]),default:e.withCtx(()=>[e.createVNode(h,{class:"tree","default-expand-all":"","default-checked-keys":e.unref(m),"node-key":"id",ref_key:"treeRef",ref:r,draggable:"","show-checkbox":"",data:e.unref(s),onNodeDragStart:e.unref(C),onNodeDragEnd:e.unref(y),"allow-drop":e.unref(u)},null,8,["default-checked-keys","data","onNodeDragStart","onNodeDragEnd","allow-drop"])]),_:1},8,["size","modelValue"])}}}),O=e.defineComponent({__name:"SettingButton",props:{state:{}},setup(n){const t=n,r=e.ref(),o=()=>{r.value.show(t.state)};return(s,i)=>{const m=e.resolveComponent("el-icon"),d=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(d,{class:"icon-button",onClick:o},{default:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[e.createVNode(e.unref(N.Setting))]),_:1}),e.createVNode(j,{ref_key:"searchSettingDialogRef",ref:r},null,512)]),_:1})}}}),F={class:"search-bar-container"},H={class:"search-item"},K={class:"search-item-title"},z=["id"],M={class:"search-bottom"},I={class:"actions"},P=e.defineComponent({__name:"SearchBar",props:{searches:{},id:{},onSearch:{},defaultSpan:{default:6},maxRows:{default:2},itemHeight:{default:67},resetAutoSearch:{type:Boolean,default:!0}},setup(n,{expose:t}){const r=n,o=e.reactive(new $(r.id,r.searches,r.onSearch)),s=e.ref(!1),i=e.computed(()=>p.sum(Array.from(Object.values(o.config.itemLayouts)).map(l=>l.span))/24>r.maxRows),m=e.computed(()=>[...o.items].sort((l,_)=>o.config.itemLayouts[l.field].index-o.config.itemLayouts[_.field].index).filter(l=>o.config.itemLayouts[l.field].visible)),d=e.computed(()=>({height:`${r.itemHeight*r.maxRows}px`,overflow:"hidden"})),u=y=>o.config.itemLayouts[y.field];return t({getSearchItems:()=>o.items}),(y,l)=>{const _=e.resolveComponent("el-col"),w=e.resolveComponent("el-row"),a=e.resolveComponent("el-icon"),h=e.resolveComponent("el-button");return e.openBlock(),e.createElementBlock("div",F,[e.createVNode(w,{class:e.normalizeClass("search"),style:e.normalizeStyle(i.value&&!s.value?d.value:{}),gutter:16},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,c=>e.withDirectives((e.openBlock(),e.createBlock(_,{span:u(c).span,key:c.field},{default:e.withCtx(()=>[e.createElementVNode("div",H,[e.createElementVNode("div",K,e.toDisplayString(c.label),1),e.createElementVNode("div",{id:`${n.id}-${c.field}`,class:"search-item-content"},[e.createVNode(e.unref(D),{search:c},null,8,["search"])],8,z)])]),_:2},1032,["span"])),[[e.vShow,u(c).visible]])),128))]),_:1},8,["style"]),e.createElementVNode("div",M,[o.tags.length>0?(e.openBlock(),e.createBlock(B,{key:0,tags:o.tags},null,8,["tags"])):e.createCommentVNode("",!0),e.createElementVNode("div",I,[i.value?(e.openBlock(),e.createBlock(h,{key:0,class:"icon-button",onClick:l[0]||(l[0]=c=>s.value=!s.value)},{default:e.withCtx(()=>[e.createVNode(a,null,{default:e.withCtx(()=>[s.value?(e.openBlock(),e.createBlock(e.unref(S.ArrowUp),{key:1})):(e.openBlock(),e.createBlock(e.unref(S.ArrowDown),{key:0}))]),_:1})]),_:1})):e.createCommentVNode("",!0),e.createVNode(O,{state:o},null,8,["state"]),e.createVNode(h,{onClick:l[1]||(l[1]=()=>o.reset(n.resetAutoSearch))},{default:e.withCtx(()=>[...l[3]||(l[3]=[e.createTextVNode("重 置",-1)])]),_:1}),e.createVNode(h,{type:"primary",loading:o.searching,disabled:o.searching,onClick:l[2]||(l[2]=()=>o.doSearch())},{default:e.withCtx(()=>[...l[4]||(l[4]=[e.createTextVNode("搜 索",-1)])]),_:1},8,["loading","disabled"])])])])}}});class x{record;constructor(t){this.record=t}static from(t){const r=t.filter(o=>o.value===void 0?!1:Array.isArray(o.value)?o.value.length>0:!0).reduce((o,s)=>{const i=s.transform?s.transform(s.value):s.value;return{...o,...p.isPlainObject(i)?i:{[s.field]:i}}},{});return new x(r)}transform(t,r){const o=this.record[t],s=r(o);return delete this.record[t],this.record={...this.record,...s},this}toCondition(t){return{...this.record,...t}}}f.SearchBar=P,f.Searches=x,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+(function(d,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],l):(d=typeof globalThis<"u"?globalThis:d||self,l(d.ElementPlusSearch={},d.lodashUnified,d.vue,d.core))})(this,function(d,l,n,A){"use strict";const F=i=>({model:{value:l.get(i,"value"),callback:e=>{l.set(i,"value",e)}}}),P=n.defineComponent({name:"SearchTags"}),R=n.defineComponent({...P,props:{tags:null},setup(i){const e=i,t=n.ref();return{__sfc:!0,props:e,scrollContainer:t,scrollLeft:()=>{t.value.scrollBy({left:-200,behavior:"smooth"})},scrollRight:()=>{t.value.scrollBy({left:200,behavior:"smooth"})}}}});function w(i,e,t,s,r,a,p,h){var f=typeof i=="function"?i.options:i;return e&&(f.render=e,f.staticRenderFns=t,f._compiled=!0),a&&(f._scopeId="data-v-"+a),{exports:i,options:f}}var q=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"tags-scroll-container"},[t("el-tag",{staticClass:"scroll-left-bar",attrs:{size:"medium",type:"info"},on:{click:s.scrollLeft}},[t("i",{staticClass:"el-icon-arrow-left"})]),t("div",{ref:"scrollContainer",staticClass:"search-tags"},e._l(e.tags,function(r){return t("el-tag",{key:r.field,staticClass:"search-tag",attrs:{size:"medium",closable:!r.required,type:r.required?"primary":"info"},on:{close:()=>r.clean()}},[t("span",[e._v(" "+e._s(r.label)+" ")]),e._v("： "),t("span",{domProps:{innerHTML:e._s(r.valueText)}})])}),1),t("el-tag",{staticClass:"scroll-right-bar",attrs:{size:"medium",type:"info"},on:{click:s.scrollRight}},[t("i",{staticClass:"el-icon-arrow-right"})])],1)},j=[],k=w(R,q,j,!1,null,null);const E=k.exports;var B=Object.defineProperty,N=(i,e,t)=>e in i?B(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,o=(i,e,t)=>N(i,typeof e!="symbol"?e+"":e,t);const T=6;class V{constructor(e,t){o(this,"field"),o(this,"label"),o(this,"value"),o(this,"required"),o(this,"index"),o(this,"visible"),o(this,"disabled"),o(this,"span"),o(this,"initValue"),o(this,"enable"),o(this,"tagFilter"),o(this,"render"),o(this,"transform");var s,r,a,p;this.field=e.field,this.label=e.label,this.value=e.initValue,this.required=e.required,this.initValue=e.initValue,this.index=t,this.visible=(s=e.visible)!=null?s:!0,this.span=(r=e.span)!=null?r:T,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(p=e.disabled)!=null?p:!1}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return l.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return l.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var I=Object.defineProperty,K=(i,e,t)=>e in i?I(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,_=(i,e,t)=>K(i,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,r){_(this,"field"),_(this,"span"),_(this,"index"),_(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=r}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,r;return new g(e.field,(s=e.span)!=null?s:T,t??e,(r=e.visible)!=null?r:!0)}static fromString(e){const[t,s,r,a]=e.split("_");return new g(s,Number(r),Number(t),a==="true")}toString(){return`${this.index}_${this.field}_${this.span}_${this.visible}`}merge(e){this.span=e.span,this.index=e.index,this.visible=e.visible}}const D=i=>`searches_layouts_${i}`;class H{constructor(e,t){_(this,"id"),_(this,"state"),_(this,"itemLayouts"),_(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=l.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem(D(this.id));e&&e.split(",").forEach(t=>{const s=g.fromString(t),r=this.itemLayouts[s.field];r&&r.merge(s)})}sync(e,t){if(e.length!==Object.keys(this.itemLayouts).length)throw new Error("同步布局字段数量不一致");e.forEach((s,r)=>{const a=this.itemLayouts[s];a.index=r,a.visible=t.has(s)})}persistent(){localStorage.setItem(D(this.id),Object.values(this.itemLayouts).map(e=>e.toString()).join(",")),this.state.updateTags()}reset(){this.initialLayouts.forEach(e=>{const t=this.itemLayouts[e.field];t&&t.merge(e)})}}var M=Object.defineProperty,z=(i,e,t)=>e in i?M(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,v=(i,e,t)=>z(i,typeof e!="symbol"?e+"":e,t);const W=[{isApply(i){return i.contains("el-radio-group")},getText(i){var e,t;return(t=(e=i.querySelector(".is-active"))==null?void 0:e.querySelector("input"))==null?void 0:t.value}},{isApply(i){return i.contains("el-checkbox-group")},getText(i){var e;const t=Array.from((e=i.querySelectorAll(".el-checkbox__input.is-checked"))!=null?e:[]).map(s=>{var r;return(r=s.querySelector("input"))==null?void 0:r.value}).filter(s=>s);return t.length===1?t[0]:`${t[0]} 等${t.length}条`}},{isApply(i){return i.contains("el-input")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-input-number")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-select")},getText(i,e){var t;const s=i.querySelectorAll(".el-select__tags-text");return s.length>0?e.value.length>1?`${s[0].textContent} 等${e.value.length}条`:s[0].textContent:(t=i.querySelector("input"))==null?void 0:t.value}},{isApply(i){return i.contains("el-cascader")},getText(i){var e;return(e=i.querySelector("input"))==null?void 0:e.value}},{isApply(i){return i.contains("el-switch")},getText(i){return i.querySelector(".is-active").innerHTML}},{isApply(i){return i.contains("el-slider")},getText(i,e){return e.value}},{isApply(i){return i.contains("el-date-editor")},getText(i,e){return e.value?e.value.join(" ~ "):e.value}}];class O{constructor(e,t){v(this,"id"),v(this,"field"),v(this,"value"),v(this,"label"),v(this,"valueText"),v(this,"required"),v(this,"item"),v(this,"state");var s;this.id=`#${e.id}-${t.field}`,this.state=e,this.field=t.field,this.value=t.value,this.label=t.label,this.item=t,this.required=(s=t.required)!=null?s:!1,this.updateValueText()}static hasValue(e){return l.isNumber(e.value)||l.isBoolean(e.value)?!0:!l.isEmpty(e.value)}updateValueText(){const e=document.querySelector(this.id);if(e.children.length!==1)throw new Error("holder children length is not 1");const t=e.children[0],s=W.find(r=>r.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(i,e,t)=>e in i?G(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,b=(i,e,t)=>X(i,typeof e!="symbol"?e+"":e,t);class J{constructor(e,t,s){this.id=e,b(this,"items"),b(this,"config"),b(this,"searching"),b(this,"tags"),b(this,"searchCallback"),b(this,"sourceSearchable"),b(this,"_lastSearchObject",{time:0,data:null}),this.id=e,this.items=t.map((r,a)=>new V(r,a)),this.config=new H(this,t.map((r,a)=>g.formSearchConfig(r,a))),this.sourceSearchable=t,this.searching=!1,this.searchCallback=s,this.tags=[]}updateTags(){this.tags=this.items.filter(e=>e.tagFilter?e.tagFilter(e.value):O.hasValue(e)).map(e=>new O(this,e)).sort((e,t)=>this.config.itemLayouts[e.field].index-this.config.itemLayouts[t.field].index)}getSearchObject(e){const t=Date.now();return this._lastSearchObject.data&&t-this._lastSearchObject.time<50?this._lastSearchObject.data:(this._lastSearchObject={time:t,data:x.from(this.items).toCondition(e)},this._lastSearchObject.data)}async doSearch(){if(!this.searching)try{this.searching=!0,await this.searchCallback(this.getSearchObject()),this.updateTags()}finally{this.searching=!1}}async reset(e){this.items.forEach(t=>t.reset()),e&&await this.doSearch()}setSearchValue(e,t){const s=this.items.find(r=>r.field===e);s&&(s.value=t)}}const Q={functional:!0,props:{search:{type:Object,required:!0},api:{type:Object}},render(i,e){const{props:t}=e,s=t.search.render(t.search);return s.componentOptions.propsData||(s.componentOptions.propsData={}),s.componentOptions.propsData.disabled=t.search.isDisabled(t.api),s}},Y=()=>{const i=n.shallowRef(),e=n.ref(),t=n.ref([]),s=n.ref(!1),r=n.ref(),a=n.ref([]),p=n.ref(300),h=u=>{i.value=u,t.value=[{label:"全部",id:"all",children:i.value.items.sort((m,L)=>u.config.itemLayouts[m.field].index-u.config.itemLayouts[L.field].index).map(m=>({label:m.label,id:m.field,disabled:!m.isEnable(u)}))}],r.value=l.chain(u.config.itemLayouts).pickBy(m=>m.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:r,drawerWidth:p,updateSnapshot:h,show:u=>{h(u),s.value=!0},save:()=>{i.value.config.sync(t.value[0].children.map(u=>u.id),new Set(e.value.getCheckedKeys())),i.value.config.persistent()},reset:()=>{i.value.config.reset(),h(i.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(u,m,L)=>L!=="inner",allowDrag:u=>!u.disabled}},Z=n.defineComponent({__name:"SearchSettingsDrawer",setup(i,{expose:e}){const{treeRef:t,visible:s,snapshot:r,drawerWidth:a,defaultCheckedKeys:p,show:h,allowDrop:f,allowDrag:C,keepSelection:S,restoreSelection:y,save:c,reset:$}=Y();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:r,drawerWidth:a,defaultCheckedKeys:p,show:h,allowDrop:f,allowDrag:C,keepSelection:S,restoreSelection:y,save:c,reset:$}}});var U=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("el-drawer",{attrs:{size:s.drawerWidth,title:"搜索项配置",visible:s.visible},on:{"update:visible":function(r){s.visible=r}}},[t("div",{staticClass:"setting-container"},[t("el-tree",{ref:"treeRef",staticClass:"tree",attrs:{"default-expand-all":"","default-checked-keys":s.defaultCheckedKeys,"node-key":"id",draggable:"","show-checkbox":"",data:s.snapshot,"allow-drop":s.allowDrop,"allow-drag":s.allowDrag},on:{"node-drag-start":s.keepSelection,"node-drag-end":s.restoreSelection}}),t("div",{staticClass:"footer"},[t("el-button",{on:{click:s.reset}},[e._v("重置")]),t("el-button",{attrs:{type:"primary"},on:{click:s.save}},[e._v("保存")])],1)],1)])},ee=[],te=w(Z,U,ee,!1,null,null);const se=te.exports,ie=n.defineComponent({__name:"SettingButton",props:{state:null},setup(i){const e=i,t=n.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:se}}});var re=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticStyle:{"margin-right":"10px"}},[t("el-button",{staticClass:"icon-button",staticStyle:{height:"100%"},on:{click:s.showSearchLayoutDialog}},[t("i",{staticClass:"el-icon-s-tools"})]),t(s.SearchSettingsDrawer,{ref:"searchSettingDialogRef"})],1)},ae=[],ne=w(ie,re,ae,!1,null,"61aa7563");const le=ne.exports,oe=n.defineComponent({__name:"SearchBar",props:{searches:null,id:null,onSearch:{type:Function},defaultSpan:{default:6},maxRows:{default:2},itemHeight:{default:67},resetAutoSearch:{type:Boolean,default:!0}},emits:["change"],setup(i,{expose:e,emit:t}){const s=i,r=n.reactive(new J(s.id,s.searches,s.onSearch)),a=n.ref(!1),p=n.computed(()=>l.sum(Array.from(Object.values(r.config.itemLayouts)).filter(c=>c.visible).map(c=>c.span))/24>s.maxRows),h=n.ref([]);A.watchDebounced(()=>r.items,()=>{const y=[...r.items];h.value=y.sort((c,$)=>r.config.itemLayouts[c.field].index-r.config.itemLayouts[$.field].index).filter(c=>r.config.itemLayouts[c.field].visible).filter(c=>c.isEnable(r)),t("change",r.getSearchObject(),r)},{debounce:100,immediate:!0,deep:!0});const f=n.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),C=y=>r.config.itemLayouts[y.field],S=()=>r.items;return e({getSearchItems:S}),{__sfc:!0,props:s,state:r,expanded:a,isShowSpanIcon:p,sortedItems:h,emits:t,itemHeightStyle:f,getLayout:C,getSearchItems:S,SearchTagsRender:E,SearchItemRender:Q,SettingButton:le}}});var ce=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"search-bar-container"},[t("el-row",{class:"search",style:s.isShowSpanIcon&&!s.expanded?s.itemHeightStyle:{},attrs:{gutter:16}},e._l(s.sortedItems,function(r){return t("el-col",{directives:[{name:"show",rawName:"v-show",value:s.getLayout(r).visible,expression:"getLayout(item).visible"}],key:r.field,attrs:{span:s.getLayout(r).span}},[t("div",{staticClass:"search-item"},[t("div",{staticClass:"search-item-title"},[e._v(e._s(r.label))]),t("div",{staticClass:"search-item-content",attrs:{id:`${e.id}-${r.field}`}},[t(s.SearchItemRender,{attrs:{search:r,api:s.state}})],1)])])}),1),t("div",{staticClass:"search-bottom"},[s.state.tags.length>0?t(s.SearchTagsRender,{attrs:{tags:s.state.tags}}):e._e(),t("div",{staticClass:"actions"},[s.isShowSpanIcon?t("el-button",{staticClass:"icon-button",staticStyle:{"margin-right":"10px"},on:{click:function(r){s.expanded=!s.expanded}}},[t("i",{class:[s.expanded?"el-icon-arrow-up":"el-icon-arrow-down"]})]):e._e(),t(s.SettingButton,{attrs:{state:s.state}}),t("el-button",{on:{click:()=>s.state.reset(e.resetAutoSearch)}},[e._v("重 置")]),t("el-button",{attrs:{type:"primary",loading:s.state.searching,disabled:s.state.searching},on:{click:()=>s.state.doSearch()}},[e._v("搜 索")])],1)],1)],1)},ue=[],de=w(oe,ce,ue,!1,null,null);const he=de.exports;var fe=Object.defineProperty,pe=(i,e,t)=>e in i?fe(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,_e=(i,e,t)=>pe(i,e+"",t);class x{constructor(e){_e(this,"record"),this.record=e}static from(e){const t=e.filter(s=>s.value===void 0?!1:Array.isArray(s.value)?s.value.length>0:!0).reduce((s,r)=>{const a=r.transform?r.transform(r.value):r.value;return{...s,...l.isPlainObject(a)?a:{[r.field]:a}}},{});return new x(t)}transform(e,t){const s=this.record[e],r=t(s);return delete this.record[e],this.record={...this.record,...r},this}toCondition(e){return{...this.record,...e}}}d.SearchBar=he,d.Searches=x,d.vModel=F,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.tags-scroll-container{display:flex}.tags-scroll-container .pointer{cursor:pointer}.tags-scroll-container .search-tags{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px}.tags-scroll-container .search-tags::-webkit-scrollbar{display:none}.tags-scroll-container .scroll-left-bar{cursor:pointer;margin-right:10px}.tags-scroll-container .scroll-right-bar{cursor:pointer;margin-left:10px}.setting-container{display:flex;flex-direction:column;height:100%}.setting-container .tree{flex:1;overflow-y:auto}.setting-container div[aria-disabled=true]{display:none}.setting-container .footer{margin-top:auto;margin-left:auto;padding:10px 15px;display:flex;gap:10px}.setting-container .footer .el-button{width:90px}.search-bar-container{font-size:14px;width:100%;display:flex;flex-direction:column}.search-bar-container .search,.search-bar-container .el-input-number,.search-bar-container .el-select,.search-bar-container .el-date-editor,.search-bar-container .el-cascader{width:100%}.search-bar-container .search-bottom{display:flex}.search-bar-container .search-bottom .tags-scroll-container{flex:1;min-width:0;margin-right:10px}.search-bar-container .search-bottom .actions{display:flex;margin-left:auto}.search-bar-container .search-bottom .actions .el-button{width:90px}.search-bar-container .search-bottom .actions .icon-button{padding:0 8px;width:34px;font-size:larger}.search-bar-container .search-item{margin-bottom:12px}.search-bar-container .search-item-content{margin-top:4px}.search-bar-container .preview{overflow-x:scroll;overflow-y:hidden}.search-bar-container .scroll-tags{display:flex;align-items:center}.search-bar-container .scroll-tags .left{margin-right:10px}.search-bar-container .scroll-tags .right{margin-left:10px}

package/dist/types/SearchBar.vue.d.ts

@@ -1,3 +1,4 @@
+import { SearchBarState } from './SearchBarState';
 import { Searchable } from './types/Searchable';
 type __VLS_Props = {
     searches: Searchable[];
@@ -8,7 +9,12 @@ type __VLS_Props = {
     itemHeight?: number;
     resetAutoSearch?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    defaultSpan: number;
+    maxRows: number;
+    itemHeight: number;
+    resetAutoSearch: boolean;
+}>, {
     getSearchItems: () => {
         field: string;
         label: string;
@@ -16,19 +22,46 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
         required?: boolean | undefined;
         index: number;
         visible: boolean;
+        disabled: boolean | import("./index.js").PredicateCallback;
         span: number;
         initValue?: any;
+        enable: boolean | import("./index.js").PredicateCallback;
         tagFilter?: ((value: any) => boolean) | undefined;
         render: import("./model/SearchItem").SearchItemRender;
-        transform?: import("./types/Searchable").TransformCallback<any> | undefined;
+        transform?: import("./index.js").TransformCallback<any> | undefined;
         clean: () => void;
         reset: () => void;
+        isEnable: (state: SearchBarState) => boolean;
+        isDisabled: (state: SearchBarState) => boolean;
     }[];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    defaultSpan: number;
+    maxRows: number;
+    itemHeight: number;
+    resetAutoSearch: boolean;
+}>>>, {
     defaultSpan: number;
     maxRows: number;
     itemHeight: number;
     resetAutoSearch: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
+}>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types/SearchBarState.d.ts

@@ -1,19 +1,20 @@
 import { SearchItem } from './model/SearchItem';
 import { SearchConfig } from './model/SearchConfig';
 import { SearchTag } from './model/SearchTag';
-import { Reactive } from 'vue';
 import { Searchable } from './types/Searchable';
 export declare class SearchBarState {
     id: string;
     items: SearchItem[];
-    config: Reactive<SearchConfig>;
+    config: SearchConfig;
     searching: boolean;
     tags: SearchTag[];
     searchCallback: <T>(params: T) => Promise<void>;
     sourceSearchable: Searchable[];
+    private _lastSearchObject;
     constructor(id: string, searches: Searchable[], onSearch: (params: any) => Promise<void>);
     updateTags(): void;
     getSearchObject<T>(ext?: any): T;
     doSearch(): Promise<void>;
     reset(search?: boolean): Promise<void>;
+    setSearchValue(field: string, value: any): void;
 }

package/dist/types/SearchItemRender.d.ts

@@ -1,5 +1,22 @@
-import type { FunctionalComponent } from 'vue';
 import type { SearchItem } from './model/SearchItem';
-export declare const SearchItemRender: FunctionalComponent<{
-    search: SearchItem;
-}>;
+import { PropType } from 'vue';
+import { SearchBarState } from './SearchBarState';
+declare const _default: {
+    functional: boolean;
+    props: {
+        search: {
+            type: PropType<SearchItem>;
+            required: boolean;
+        };
+        api: {
+            type: PropType<SearchBarState>;
+        };
+    };
+    render(h: any, context: {
+        props: {
+            search: SearchItem;
+            api: SearchBarState;
+        };
+    }): import("vue").VNode;
+};
+export default _default;

package/dist/types/SearchTagsRender.vue.d.ts

@@ -1,7 +1,20 @@
-import type { SearchTag } from './model/SearchTag';
 type __VLS_Props = {
-    tags: SearchTag[];
+    tags: ({
+        required?: boolean;
+        valueText?: string;
+        label: string;
+        field: string;
+        clean: () => void;
+    } & any)[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/helper/vModel.d.ts

@@ -0,0 +1,14 @@
+import { SearchValueLike } from '../types/SearchValueLike';
+/**
+ * vue2 翻译jsx片段时在非组件上下文中会生成this.$set 尝试设置属性导致报错 此时使用此方法绕过生成
+ *
+ * 此函数为变种专用于search组件
+ *
+ * @param searchValue
+ */
+export declare const vModel: (searchValue: SearchValueLike) => {
+    model: {
+        value: any;
+        callback: (newValue: any) => void;
+    };
+};

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
 import { TransformCallback } from './types/Searchable';
 import { SearchValueLike } from './types/SearchValueLike';
+export * from "./helper/vModel";
+export * from "./types/Searchable";
 export { default as SearchBar } from './SearchBar.vue';
 export type SearchBarInstance = {
     getSearchItems(): SearchValueLike[];

package/dist/types/model/SearchItem.d.ts

@@ -1,6 +1,7 @@
 import type { VNode } from 'vue';
 import { SearchValueLike } from '../types/SearchValueLike';
-import { Searchable, TransformCallback } from '../types/Searchable';
+import { PredicateCallback, Searchable, TransformCallback } from '../types/Searchable';
+import { SearchBarState } from '../SearchBarState';
 export declare const DEFAULT_SEARCH_SPAN = 6;
 export type SearchItemRender = (value: SearchValueLike) => VNode | undefined;
 export declare class SearchItem {
@@ -10,12 +11,16 @@ export declare class SearchItem {
     required?: boolean;
     index: number;
     visible: boolean;
+    disabled: boolean | PredicateCallback;
     span: number;
     initValue?: any;
+    enable: boolean | PredicateCallback;
     tagFilter?: (value: any) => boolean;
     render: SearchItemRender;
     transform?: TransformCallback<any>;
     constructor(searchable: Searchable, index: number);
     clean(): void;
     reset(): void;
+    isEnable(state: SearchBarState): boolean;
+    isDisabled(state: SearchBarState): boolean;
 }

package/dist/types/setting/SearchSettingsDrawer.vue.d.ts

@@ -1,5 +1,4 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {
+declare const _default: import("vue").DefineComponent<{}, {
     show: (api: import("../SearchBarState").SearchBarState) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/setting/SettingButton.vue.d.ts

@@ -3,6 +3,14 @@ import { SearchBarState } from '../SearchBarState';
 type __VLS_Props = {
     state: UnwrapNestedRefs<SearchBarState>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/types/setting/use-setting.d.ts

@@ -1,24 +1,14 @@
 import type { SearchBarState } from '../SearchBarState';
-import { TreeInstance } from 'element-plus';
-type TreeNode = {
-    label: string;
-    id: string;
-    children?: TreeNode[];
-};
 export declare const useSetting: () => {
-    treeRef: import("vue").Ref<TreeInstance | undefined, TreeInstance | undefined>;
-    visible: import("vue").Ref<boolean, boolean>;
+    treeRef: import("vue").Ref<any>;
+    visible: import("vue").Ref<boolean>;
     snapshot: import("vue").Ref<{
         label: string;
         id: string;
         children?: /*elided*/ any[] | undefined;
-    }[], TreeNode[] | {
-        label: string;
-        id: string;
-        children?: /*elided*/ any[] | undefined;
     }[]>;
-    defaultCheckedKeys: import("vue").Ref<string[] | undefined, string[] | undefined>;
-    drawerWidth: import("vue").Ref<number, number>;
+    defaultCheckedKeys: import("vue").Ref<string[] | undefined>;
+    drawerWidth: import("vue").Ref<number>;
     updateSnapshot: (api: SearchBarState) => void;
     show: (api: SearchBarState) => void;
     save: () => void;
@@ -26,5 +16,5 @@ export declare const useSetting: () => {
     keepSelection: () => void;
     restoreSelection: () => void;
     allowDrop: (_: any, __: any, type: string) => boolean;
+    allowDrag: (node: any) => boolean;
 };
-export {};

package/dist/types/types/Searchable.d.ts

@@ -1,6 +1,8 @@
 import type { VNode } from 'vue';
 import { SearchItem } from '../model/SearchItem';
+import { SearchBarState } from '../SearchBarState';
 export type TransformCallback<T> = (value: T) => Record<string, any>;
+export type PredicateCallback = (value: SearchBarState) => boolean;
 export interface Searchable {
     /**
      * 属性名
@@ -22,8 +24,13 @@ export interface Searchable {
      * 搜索的tag标签是否可以关闭
      */
     required?: boolean;
+    disabled?: boolean | PredicateCallback;
     index?: number;
     visible?: boolean;
+    /**
+     * 搜索项是否启用
+     */
+    enable: boolean | PredicateCallback;
     span?: number;
     /**
      * 渲染器

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scvzerng/element-plus-search-vue2",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "private": false,
   "scripts": {

package/dist/element-plus-search.css

@@ -1 +0,0 @@
-@charset "UTF-8";.tags-scroll-container{display:flex}.tags-scroll-container .pointer{cursor:pointer}.tags-scroll-container .search-tags{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px}.tags-scroll-container .search-tags::-webkit-scrollbar{display:none}.tags-scroll-container .scroll-left-bar{cursor:pointer;margin-right:10px}.tags-scroll-container .scroll-right-bar{cursor:pointer;margin-left:10px}.search-setting .el-drawer__footer{border-top:var(--el-border);padding:10px}.search-setting .el-drawer__footer .el-button{width:90px}.search-setting .el-drawer__header{margin-bottom:unset;border-bottom:var(--el-border);padding:10px}.search-bar-container{font-size:smaller}.search-bar-container .search{width:100%}.search-bar-container .collapsed{max-height:134px;overflow:hidden}.search-bar-container,.search-bar-container .el-input-number,.search-bar-container .el-select,.search-bar-container .el-date-editor,.search-bar-container .el-cascader{width:100%}.search-bar-container{display:flex;flex-direction:column}.search-bar-container .search-bottom{display:flex}.search-bar-container .search-bottom .tags-scroll-container{flex:1;min-width:0;margin-right:10px}.search-bar-container .search-bottom .actions .el-button{width:90px}.search-bar-container .search-bottom .actions{display:flex}.search-bar-container .search-bottom .actions .icon-button{padding:0 8px;width:34px;font-size:larger}.search-bar-container .search-bottom .actions{margin-left:auto}.search-bar-container .search-item{margin-bottom:12px}.search-bar-container .search-item-content{margin-top:4px}.search-bar-container .preview{overflow-x:scroll;overflow-y:hidden}.search-bar-container .scroll-tags{display:flex;align-items:center}.search-bar-container .scroll-tags .left{margin-right:10px}.search-bar-container .scroll-tags .right{margin-left:10px}