@scvzerng/element-plus-search-vue2 0.0.2 → 0.0.4

package/dist/ElementPlusSearch.umd.js

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

package/dist/element-plus-search.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}.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-setting div[aria-disabled=true]{display:none}.search-bar-container{font-size:14px}.search-bar-container .search,.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}