@scvzerng/element-plus-search-vue2 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -415,7 +415,7 @@ const ye = be.exports, Se = /* @__PURE__ */ w({
415
415
  const s = r, i = H(new oe(s.id, s.searches, s.onSearch)), a = d(!1), u = T(() => B(Array.from(Object.values(i.config.itemLayouts)).filter((n) => n.visible).map((n) => n.span)) / 24 > s.maxRows), o = d([]);
416
416
  M(() => [i.items, i.config.itemLayouts], () => {
417
417
  const v = [...i.items];
418
- o.value = v.sort((n, h) => i.config.itemLayouts[n.field].index - i.config.itemLayouts[h.field].index).filter((n) => i.config.itemLayouts[n.field].visible).filter((n) => n.isEnable(i)), t("change", i.getSearchObject(), i);
418
+ o.value = v.sort((n, h) => i.config.itemLayouts[n.field].index - i.config.itemLayouts[h.field].index).filter((n) => n.isEnable(i)), t("change", i.getSearchObject(), i);
419
419
  }, { debounce: 100, immediate: !0, deep: !0 });
420
420
  const c = T(() => ({
421
421
  height: `${s.itemHeight * s.maxRows}px`,
@@ -1 +1 @@
1
- (function(c,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],o):(c=typeof globalThis<"u"?globalThis:c||self,o(c.ElementPlusSearch={},c.lodashUnified,c.vue,c.core))})(this,function(c,o,l,P){"use strict";const E=r=>({model:{value:o.get(r,"value"),callback:e=>{o.set(r,"value",e)}}}),F=l.defineComponent({name:"SearchTags"}),j=l.defineComponent({...F,props:{tags:null},setup(r){const e=r,t=l.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 L(r,e,t,s,i,a,f,h){var d=typeof r=="function"?r.options:r;return e&&(d.render=e,d.staticRenderFns=t,d._compiled=!0),a&&(d._scopeId="data-v-"+a),{exports:r,options:d}}var R=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)},q=[],k=L(j,R,q,!1,null,null);const N=k.exports;var B=Object.defineProperty,V=(r,e,t)=>e in r?B(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,u=(r,e,t)=>V(r,typeof e!="symbol"?e+"":e,t);const A=6;class I{constructor(e,t){u(this,"field"),u(this,"label"),u(this,"value"),u(this,"required"),u(this,"index"),u(this,"visible"),u(this,"disabled"),u(this,"span"),u(this,"initValue"),u(this,"enable"),u(this,"tagFilter"),u(this,"render"),u(this,"transform"),u(this,"onChange");var s,i,a,f;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:A,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(f=e.disabled)!=null?f:!1,e.onChange&&(this.onChange=P.useDebounceFn((h,d)=>e.onChange(h,d),50))}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return o.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return o.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var H=Object.defineProperty,M=(r,e,t)=>e in r?H(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,_=(r,e,t)=>M(r,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,i){_(this,"field"),_(this,"span"),_(this,"index"),_(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=i}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,i;return new g(e.field,(s=e.span)!=null?s:A,t??e,(i=e.visible)!=null?i:!0)}static fromString(e){const[t,s,i,a]=e.split("_");return new g(s,Number(i),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 $=r=>`searches_layouts_${r}`;class W{constructor(e,t){_(this,"id"),_(this,"state"),_(this,"itemLayouts"),_(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=o.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem($(this.id));e&&e.split(",").forEach(t=>{const s=g.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 a=this.itemLayouts[s];a.index=i,a.visible=t.has(s)})}persistent(){localStorage.setItem($(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 K=Object.defineProperty,Y=(r,e,t)=>e in r?K(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,v=(r,e,t)=>Y(r,typeof e!="symbol"?e+"":e,t);const z=[{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 D{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 o.isNumber(e.value)||o.isBoolean(e.value)?!0:!o.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=z.find(i=>i.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(r,e,t)=>e in r?G(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,m=(r,e,t)=>X(r,typeof e!="symbol"?e+"":e,t);class J{constructor(e,t,s){this.id=e,m(this,"items"),m(this,"config"),m(this,"searching"),m(this,"tags"),m(this,"searchCallback"),m(this,"sourceSearchable"),m(this,"_lastSearchObject",{time:0,data:null}),this.id=e,this.items=t.map((i,a)=>new I(i,a)),this.config=new W(this,t.map((i,a)=>g.formSearchConfig(i,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):D.hasValue(e)).map(e=>new D(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,s=i=>!0){const i=this.items.find(a=>a.field===e);i&&s&&s(i.value)&&(i.value=t)}}const Q={functional:!0,props:{search:{type:Object,required:!0},api:{type:Object}},render(r,e){const{props:t}=e,s=t.search.render(t.search);if(s.componentOptions.propsData||(s.componentOptions.propsData={}),s.componentOptions.listeners||(s.componentOptions.listeners={}),s.componentOptions.listeners.input){const i=s.componentOptions.listeners.input;s.componentOptions.listeners.input=a=>{t.search.onChange&&t.search.onChange(a,t.api),i(a)}}return s.componentOptions.propsData.disabled=t.search.isDisabled(t.api),s}},Z=()=>{const r=l.shallowRef(),e=l.ref(),t=l.ref([]),s=l.ref(!1),i=l.ref(),a=l.ref([]),f=l.ref(300),h=n=>{r.value=n,t.value=[{label:"全部",id:"all",children:r.value.items.sort((p,O)=>n.config.itemLayouts[p.field].index-n.config.itemLayouts[O.field].index).map(p=>({label:p.label,id:p.field,disabled:!p.isEnable(n)}))}],i.value=o.chain(n.config.itemLayouts).pickBy(p=>p.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:i,drawerWidth:f,updateSnapshot:h,show:n=>{h(n),s.value=!0},save:()=>{r.value.config.sync(t.value[0].children.map(n=>n.id),new Set(e.value.getCheckedKeys())),r.value.config.persistent()},reset:()=>{r.value.config.reset(),h(r.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(n,p,O)=>O!=="inner",allowDrag:n=>!n.disabled}},U=l.defineComponent({__name:"SearchSettingsDrawer",setup(r,{expose:e}){const{treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}=Z();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}}});var ee=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,"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)])},te=[],se=L(U,ee,te,!1,null,null);const re=se.exports,ie=l.defineComponent({__name:"SettingButton",props:{state:null},setup(r){const e=r,t=l.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:re}}});var ae=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)},ne=[],le=L(ie,ae,ne,!1,null,"61aa7563");const oe=le.exports,ce=l.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(r,{expose:e,emit:t}){const s=r,i=l.reactive(new J(s.id,s.searches,s.onSearch)),a=l.ref(!1),f=l.computed(()=>o.sum(Array.from(Object.values(i.config.itemLayouts)).filter(n=>n.visible).map(n=>n.span))/24>s.maxRows),h=l.ref([]);P.watchDebounced(()=>[i.items,i.config.itemLayouts],()=>{const b=[...i.items];h.value=b.sort((n,p)=>i.config.itemLayouts[n.field].index-i.config.itemLayouts[p.field].index).filter(n=>i.config.itemLayouts[n.field].visible).filter(n=>n.isEnable(i)),t("change",i.getSearchObject(),i)},{debounce:100,immediate:!0,deep:!0});const d=l.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),T=b=>i.config.itemLayouts[b.field],y=()=>i.items,S=()=>i.getSearchObject(),w=b=>{i.searching=b},C=()=>{i.updateTags()};return e({getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C}),{__sfc:!0,props:s,state:i,expanded:a,isShowSpanIcon:f,sortedItems:h,emits:t,itemHeightStyle:d,getLayout:T,getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C,SearchTagsRender:N,SearchItemRender:Q,SettingButton:oe}}});var ue=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"search-bar-container"},[t("el-row",{class:"search",staticStyle:{"flex-wrap":"wrap"},style:s.isShowSpanIcon&&!s.expanded?s.itemHeightStyle:{},attrs:{type:"flex",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,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(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",{attrs:{type:"primary",loading:s.state.searching,disabled:s.state.searching},on:{click:()=>s.state.doSearch()}},[e._v("查 询")]),t("el-button",{on:{click:()=>s.state.reset(e.resetAutoSearch)}},[e._v("重 置")])],1)],1)],1)},he=[],de=L(ce,ue,he,!1,null,null);const fe=de.exports;var pe=Object.defineProperty,_e=(r,e,t)=>e in r?pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ve=(r,e,t)=>_e(r,e+"",t);const ge=r=>o.isEmpty(r),me=()=>!0,be=(r,e)=>{const t=r.getSearchObject();let s=!0;for(const[i,a]of Object.entries(e)){const f=t[i];s=a(f),s||(s=!1)}return()=>s},ye=(r,e,t)=>({refreshCallback:async s=>{const i=e.value.getSearchObject();try{return e.value.updateSearching(!0),await r(i,s)}finally{e.value.updateSearching(!1),e.value.updateTags()}},searchCallback:async()=>{var s;for(const i of t)await((s=i.value)==null?void 0:s.refresh())}});class x{constructor(e){ve(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 a=i.transform?i.transform(i.value):i.value;return{...s,...o.isPlainObject(a)?a:{[i.field]:a}}},{});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.APPLY_ALWAYS=me,c.APPLY_WHEN_NOT_VALUE=ge,c.APPLY_WITH_MULTIPLE_VALUE=be,c.SearchBar=fe,c.Searches=x,c.useSearchProxy=ye,c.vModel=E,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
1
+ (function(c,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("lodash-unified"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","lodash-unified","vue","@vueuse/core"],o):(c=typeof globalThis<"u"?globalThis:c||self,o(c.ElementPlusSearch={},c.lodashUnified,c.vue,c.core))})(this,function(c,o,l,P){"use strict";const E=r=>({model:{value:o.get(r,"value"),callback:e=>{o.set(r,"value",e)}}}),F=l.defineComponent({name:"SearchTags"}),j=l.defineComponent({...F,props:{tags:null},setup(r){const e=r,t=l.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 x(r,e,t,s,i,a,f,h){var d=typeof r=="function"?r.options:r;return e&&(d.render=e,d.staticRenderFns=t,d._compiled=!0),a&&(d._scopeId="data-v-"+a),{exports:r,options:d}}var R=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)},q=[],k=x(j,R,q,!1,null,null);const N=k.exports;var B=Object.defineProperty,V=(r,e,t)=>e in r?B(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,u=(r,e,t)=>V(r,typeof e!="symbol"?e+"":e,t);const A=6;class I{constructor(e,t){u(this,"field"),u(this,"label"),u(this,"value"),u(this,"required"),u(this,"index"),u(this,"visible"),u(this,"disabled"),u(this,"span"),u(this,"initValue"),u(this,"enable"),u(this,"tagFilter"),u(this,"render"),u(this,"transform"),u(this,"onChange");var s,i,a,f;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:A,this.render=e.render,this.tagFilter=e.tagFilter,this.transform=e.transform,this.enable=(a=e.enable)!=null?a:!0,this.disabled=(f=e.disabled)!=null?f:!1,e.onChange&&(this.onChange=P.useDebounceFn((h,d)=>e.onChange(h,d),50))}clean(){Array.isArray(this.value)?this.value=[]:this.value=void 0}reset(){this.value=this.initValue}isEnable(e){return o.isFunction(this.enable)?this.enable(e.getSearchObject()):this.enable}isDisabled(e){return o.isFunction(this.disabled)?this.disabled(e.getSearchObject()):this.disabled}}var H=Object.defineProperty,M=(r,e,t)=>e in r?H(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,_=(r,e,t)=>M(r,typeof e!="symbol"?e+"":e,t);class g{constructor(e,t,s,i){_(this,"field"),_(this,"span"),_(this,"index"),_(this,"visible"),this.field=e,this.span=t,this.index=s,this.visible=i}static fromSearchItem(e,t){return new g(e.field,e.span,t??e.index,e.visible)}static formSearchConfig(e,t){var s,i;return new g(e.field,(s=e.span)!=null?s:A,t??e,(i=e.visible)!=null?i:!0)}static fromString(e){const[t,s,i,a]=e.split("_");return new g(s,Number(i),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 $=r=>`searches_layouts_${r}`;class W{constructor(e,t){_(this,"id"),_(this,"state"),_(this,"itemLayouts"),_(this,"initialLayouts"),this.id=e.id,this.initialLayouts=t,this.state=e,this.itemLayouts=o.keyBy(e.items.map(g.fromSearchItem),s=>s.field),this.restoreCachedLayouts()}restoreCachedLayouts(){const e=localStorage.getItem($(this.id));e&&e.split(",").forEach(t=>{const s=g.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 a=this.itemLayouts[s];a.index=i,a.visible=t.has(s)})}persistent(){localStorage.setItem($(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 K=Object.defineProperty,Y=(r,e,t)=>e in r?K(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,v=(r,e,t)=>Y(r,typeof e!="symbol"?e+"":e,t);const z=[{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 D{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 o.isNumber(e.value)||o.isBoolean(e.value)?!0:!o.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=z.find(i=>i.isApply(t.classList));s&&(this.valueText=s.getText(t,this))}async clean(){this.item.clean(),await this.state.doSearch()}}var G=Object.defineProperty,X=(r,e,t)=>e in r?G(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,m=(r,e,t)=>X(r,typeof e!="symbol"?e+"":e,t);class J{constructor(e,t,s){this.id=e,m(this,"items"),m(this,"config"),m(this,"searching"),m(this,"tags"),m(this,"searchCallback"),m(this,"sourceSearchable"),m(this,"_lastSearchObject",{time:0,data:null}),this.id=e,this.items=t.map((i,a)=>new I(i,a)),this.config=new W(this,t.map((i,a)=>g.formSearchConfig(i,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):D.hasValue(e)).map(e=>new D(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:L.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,s=i=>!0){const i=this.items.find(a=>a.field===e);i&&s&&s(i.value)&&(i.value=t)}}const Q={functional:!0,props:{search:{type:Object,required:!0},api:{type:Object}},render(r,e){const{props:t}=e,s=t.search.render(t.search);if(s.componentOptions.propsData||(s.componentOptions.propsData={}),s.componentOptions.listeners||(s.componentOptions.listeners={}),s.componentOptions.listeners.input){const i=s.componentOptions.listeners.input;s.componentOptions.listeners.input=a=>{t.search.onChange&&t.search.onChange(a,t.api),i(a)}}return s.componentOptions.propsData.disabled=t.search.isDisabled(t.api),s}},Z=()=>{const r=l.shallowRef(),e=l.ref(),t=l.ref([]),s=l.ref(!1),i=l.ref(),a=l.ref([]),f=l.ref(300),h=n=>{r.value=n,t.value=[{label:"全部",id:"all",children:r.value.items.sort((p,O)=>n.config.itemLayouts[p.field].index-n.config.itemLayouts[O.field].index).map(p=>({label:p.label,id:p.field,disabled:!p.isEnable(n)}))}],i.value=o.chain(n.config.itemLayouts).pickBy(p=>p.visible).keys().value()};return{treeRef:e,visible:s,snapshot:t,defaultCheckedKeys:i,drawerWidth:f,updateSnapshot:h,show:n=>{h(n),s.value=!0},save:()=>{r.value.config.sync(t.value[0].children.map(n=>n.id),new Set(e.value.getCheckedKeys())),r.value.config.persistent()},reset:()=>{r.value.config.reset(),h(r.value)},keepSelection:()=>{a.value=e.value.getCheckedKeys()},restoreSelection:()=>{e.value.setCheckedKeys(a.value),a.value=[]},allowDrop:(n,p,O)=>O!=="inner",allowDrag:n=>!n.disabled}},U=l.defineComponent({__name:"SearchSettingsDrawer",setup(r,{expose:e}){const{treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}=Z();return e({show:h}),{__sfc:!0,treeRef:t,visible:s,snapshot:i,drawerWidth:a,defaultCheckedKeys:f,show:h,allowDrop:d,allowDrag:T,keepSelection:y,restoreSelection:S,save:w,reset:C}}});var ee=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,"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)])},te=[],se=x(U,ee,te,!1,null,null);const re=se.exports,ie=l.defineComponent({__name:"SettingButton",props:{state:null},setup(r){const e=r,t=l.ref();return{__sfc:!0,props:e,searchSettingDialogRef:t,showSearchLayoutDialog:()=>{t.value.show(e.state)},SearchSettingsDrawer:re}}});var ae=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)},ne=[],le=x(ie,ae,ne,!1,null,"61aa7563");const oe=le.exports,ce=l.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(r,{expose:e,emit:t}){const s=r,i=l.reactive(new J(s.id,s.searches,s.onSearch)),a=l.ref(!1),f=l.computed(()=>o.sum(Array.from(Object.values(i.config.itemLayouts)).filter(n=>n.visible).map(n=>n.span))/24>s.maxRows),h=l.ref([]);P.watchDebounced(()=>[i.items,i.config.itemLayouts],()=>{const b=[...i.items];h.value=b.sort((n,p)=>i.config.itemLayouts[n.field].index-i.config.itemLayouts[p.field].index).filter(n=>n.isEnable(i)),t("change",i.getSearchObject(),i)},{debounce:100,immediate:!0,deep:!0});const d=l.computed(()=>({height:`${s.itemHeight*s.maxRows}px`,overflow:"hidden"})),T=b=>i.config.itemLayouts[b.field],y=()=>i.items,S=()=>i.getSearchObject(),w=b=>{i.searching=b},C=()=>{i.updateTags()};return e({getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C}),{__sfc:!0,props:s,state:i,expanded:a,isShowSpanIcon:f,sortedItems:h,emits:t,itemHeightStyle:d,getLayout:T,getSearchItems:y,getSearchObject:S,updateSearching:w,updateTags:C,SearchTagsRender:N,SearchItemRender:Q,SettingButton:oe}}});var ue=function(){var e=this,t=e._self._c,s=e._self._setupProxy;return t("div",{staticClass:"search-bar-container"},[t("el-row",{class:"search",staticStyle:{"flex-wrap":"wrap"},style:s.isShowSpanIcon&&!s.expanded?s.itemHeightStyle:{},attrs:{type:"flex",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,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(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",{attrs:{type:"primary",loading:s.state.searching,disabled:s.state.searching},on:{click:()=>s.state.doSearch()}},[e._v("查 询")]),t("el-button",{on:{click:()=>s.state.reset(e.resetAutoSearch)}},[e._v("重 置")])],1)],1)],1)},he=[],de=x(ce,ue,he,!1,null,null);const fe=de.exports;var pe=Object.defineProperty,_e=(r,e,t)=>e in r?pe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,ve=(r,e,t)=>_e(r,e+"",t);const ge=r=>o.isEmpty(r),me=()=>!0,be=(r,e)=>{const t=r.getSearchObject();let s=!0;for(const[i,a]of Object.entries(e)){const f=t[i];s=a(f),s||(s=!1)}return()=>s},ye=(r,e,t)=>({refreshCallback:async s=>{const i=e.value.getSearchObject();try{return e.value.updateSearching(!0),await r(i,s)}finally{e.value.updateSearching(!1),e.value.updateTags()}},searchCallback:async()=>{var s;for(const i of t)await((s=i.value)==null?void 0:s.refresh())}});class L{constructor(e){ve(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 a=i.transform?i.transform(i.value):i.value;return{...s,...o.isPlainObject(a)?a:{[i.field]:a}}},{});return new L(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.APPLY_ALWAYS=me,c.APPLY_WHEN_NOT_VALUE=ge,c.APPLY_WITH_MULTIPLE_VALUE=be,c.SearchBar=fe,c.Searches=L,c.useSearchProxy=ye,c.vModel=E,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scvzerng/element-plus-search-vue2",
3
- "version": "0.0.9",
3
+ "version": "0.0.10",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {