UNPKG

@mineadmin/search

Version:

基于 @mineadmin/form 和 element plus 封装的列表搜索面板组件

2 lines (1 loc) 7.98 kB
(function(m,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],a):a((m=typeof globalThis<"u"?globalThis:m||self).MaTable={},m.Vue,m.ElementPlus)})(this,function(m,a,C){"use strict";const G={name:"HeroiconsMagnifyingGlass"},B=(c,n)=>{const v=c.__vccOpts||c;for(const[p,h]of n)v[p]=h;return v},W={xmlns:"http://www.w3.org/2000/svg",width:"1.2em",height:"1.2em",viewBox:"0 0 20 20"},Z=[a.createElementVNode("path",{fill:"currentColor",fillRule:"evenodd",d:"M9 3.5a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9",clipRule:"evenodd"},null,-1)],J=B(G,[["render",function(c,n,v,p,h,y){return a.openBlock(),a.createElementBlock("svg",W,Z)}]]),Q={name:"CarbonZoomReset"},X={xmlns:"http://www.w3.org/2000/svg",width:"1.2em",height:"1.2em",viewBox:"0 0 32 32"},Y=[a.createElementVNode("path",{fill:"currentColor",d:"M22.448 21A10.86 10.86 0 0 0 25 14A10.99 10.99 0 0 0 6 6.466V2H4v8h8V8H7.332a8.977 8.977 0 1 1-2.1 8h-2.04A11.01 11.01 0 0 0 14 25a10.86 10.86 0 0 0 7-2.552L28.586 30L30 28.586Z"},null,-1)],ee=B(Q,[["render",function(c,n,v,p,h,y){return a.openBlock(),a.createElementBlock("svg",X,Y)}]]),ae={name:"MaterialSymbolsKeyboardArrowUp"},le={xmlns:"http://www.w3.org/2000/svg",width:"1.3em",height:"1.3em",viewBox:"0 0 24 24"},ne=[a.createElementVNode("path",{fill:"currentColor",d:"m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z"},null,-1)],oe=B(ae,[["render",function(c,n,v,p,h,y){return a.openBlock(),a.createElementBlock("svg",le,ne)}]]),re={name:"MaterialSymbolsKeyboardArrowDown"},te={xmlns:"http://www.w3.org/2000/svg",width:"1.3em",height:"1.3em",viewBox:"0 0 24 24"},se=[a.createElementVNode("path",{fill:"currentColor",d:"m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z"},null,-1)],ce=B(re,[["render",function(c,n,v,p,h,y){return a.openBlock(),a.createElementBlock("svg",te,se)}]]),F=a.defineComponent({name:"MaSearch",props:{options:{type:Object,default:()=>({})},formOptions:{type:Object,default:()=>({})},searchItems:{type:Array,default:()=>[]}},emits:["search","reset","fold"],setup(c,{slots:n,attrs:v,emit:p,expose:h}){var z;const y=a.inject("MaSearchOptions"),j=a.ref(!1),N=`_${Math.floor(1e5*Math.random()+2e4*Math.random()+5e3*Math.random())}`,V=a.getCurrentInstance(),o=a.ref(c.options),S=a.ref(c.formOptions),u=a.ref(c.searchItems),i=a.ref(((z=o.value)==null?void 0:z.defaultValue)??{}),M=()=>{var e;return(e=V==null?void 0:V.proxy)==null?void 0:e.$refs[`maFormSearchRef${N}`]},L=()=>{delete i.value.__MaSearchAction,p("search",i.value)},b=()=>o.value.fold,_=()=>{o.value.fold=!o.value.fold;const e=o.value.foldRows;u.value.map((l,s)=>{var r;if(s>(e?e-1:1)&&l.prop!=="__MaSearchAction"){const t=typeof l.hide=="function"?(r=l==null?void 0:l.hide)==null?void 0:r.call(l):(l==null?void 0:l.hide)??!1;l.show=!t&&o.value.fold,u.value[s]=l}}),p("fold",o.value.fold)},ue=()=>{var r,t;const{text:e}=o.value,l=b()?((r=e==null?void 0:e.isFoldBtn)==null?void 0:r.call(e))??"折叠":((t=e==null?void 0:e.notFoldBtn)==null?void 0:t.call(e))??"展开",s=b()?a.createVNode(oe,null,null):a.createVNode(ce,null,null);return a.createVNode(a.resolveComponent("el-link"),{type:"primary",underline:"never",onClick:()=>_()},{default:()=>l,icon:()=>a.createVNode("div",{className:"fold-icon"},[s])})},P=()=>{var t,H,K,U;const{text:e,foldButtonShow:l,searchBtnProps:s,resetBtnProps:r}=o.value;return a.createVNode("div",{className:"mineadmin-list-search-action"},[((t=n.actions)==null?void 0:t.call(n))??a.createVNode("div",{className:"search-actions"},[a.createVNode("div",{className:"actions-first"},[(H=n.beforeActions)==null?void 0:H.call(n)]),a.createVNode(C.ElButton,a.mergeProps({type:"primary",plain:!0},s,{onClick:()=>L()}),{default:()=>{var f;return((f=e==null?void 0:e.searchBtn)==null?void 0:f.call(e))??"搜索"},icon:()=>a.createVNode(J,null,null)}),a.createVNode(C.ElButton,a.mergeProps(r,{onClick:()=>{var f,q;return u.value.map((d,ie)=>{var D;const E=typeof d.prop=="function"?(D=d==null?void 0:d.prop)==null?void 0:D.call(d):d.prop??void 0;!(d!=null&&d.show)&&E&&E!=="__MaSearchAction"&&(i.value[E]=void 0)}),(q=(f=M())==null?void 0:f.getElFormRef())==null||q.resetFields(),delete i.value.__MaSearchAction,void p("reset",i.value)}}),{default:()=>{var f;return((f=e==null?void 0:e.resetBtn)==null?void 0:f.call(e))??"重置"},icon:()=>a.createVNode(ee,null,null)}),a.createVNode("div",{className:"actions-end"},[(K=n.afterActions)==null?void 0:K.call(n)])]),(l??!0)&&((U=u.value)==null?void 0:U.length)>2&&ue()])},g=a.computed(()=>{const{cols:e}=o.value;switch(w.value){case"xl":return(e==null?void 0:e.xl)??4;case"lg":return(e==null?void 0:e.lg)??3;case"md":return(e==null?void 0:e.md)??2;case"sm":return(e==null?void 0:e.sm)??2;case"xs":return(e==null?void 0:e.xs)??1}});a.computed(()=>({display:"grid",gridGap:"10px 0px",gridTemplateColumns:`repeat(${g.value}, minmax(0, 1fr))`}));const k=(e,l=1,s=0)=>{let r=l,t=s;return e?{gridColumnStart:g.value-r-t+1,gridColumnEnd:`span ${r+t}`,marginLeft:t!==0?`calc(((100% + 10px) / ${r+t}) * ${t})`:"unset"}:{gridColumn:`span ${r+t>g.value?g.value:r+t}/span ${r+t>g.value?g.value:r+t}`,marginLeft:t!==0?`calc(((100% + 10px) / ${r+t}) * ${t})`:"unset"}},x=()=>{var e;T("__MaSearchAction")||u.value.push({prop:"__MaSearchAction",render:()=>P}),u.value.map((l,s)=>{l.prop!=="__MaSearchAction"?(l.renderProps===void 0?l.renderProps={class:"mine-w-full"}:l.renderProps.class="mine-w-full",l.renderProps.onKeyup=r=>{(r==null?void 0:r.code)!=="Enter"&&(r==null?void 0:r.key)!=="Enter"||L()},l.cols===void 0?l.cols={style:k(!1,l==null?void 0:l.span,l==null?void 0:l.offset)}:l.cols.style=k(!1,l==null?void 0:l.span,l==null?void 0:l.offset)):(l.itemProps={labelWidth:"0px"},l.cols={style:k(!0,1)}),u.value[s]=l}),S.value.flex={style:{display:"grid"}},(e=M())==null||e.setItems(u.value)},O=()=>{var e;(e=M())==null||e.setOptions(S.value)},I=()=>{x(),O();const{show:e}=o.value,l=typeof e=="function"?e:()=>e!==!1;return a.createVNode(a.Fragment,null,[a.withDirectives(a.createVNode("div",{className:`mineadmin-list-search-panel sp-${N}`},[a.createVNode(a.resolveComponent("ma-form"),a.mergeProps({ref:`maFormSearchRef${N}`,modelValue:i.value,"onUpdate:modelValue":s=>i.value=s},v),{default:n!=null&&n.default?()=>{var s;return(s=n.default)==null?void 0:s.call(n)}:null})]),[[a.vShow,l()]])])},w=a.ref(),A=()=>{let e=window.innerWidth;switch(!!e){case e<768:w.value="xs";break;case(e>=768&&e<992):w.value="sm";break;case(e>=992&&e<1200):w.value="md";break;case(e>=1200&&e<1920):w.value="lg";break;case e>=1920:w.value="xl"}};a.onMounted(async()=>{var e;j.value=!0,o.value.fold=((e=o.value)==null?void 0:e.fold)??!1,await a.nextTick(()=>_()),A(),window.addEventListener("resize",A)}),a.onBeforeUnmount(()=>{window.removeEventListener("resize",A)});const R=e=>{u.value=e,x()},T=e=>{var l;return((l=u.value.filter(s=>s.prop===e))==null?void 0:l[0])??null};return h({getMaFormRef:M,setSearchForm:e=>{i.value=e===null?{}:Object.assign(i.value,e)},getSearchForm:()=>(delete i.value.__MaSearchAction,i.value),foldToggle:_,getFold:b,setShowState:e=>o.value.show=e,getShowState:()=>{var e;return((e=o.value)==null?void 0:e.show)??!0},setOptions:e=>{o.value=Object.assign(o.value,e),x(),O()},getOptions:()=>o.value,setFormOptions:e=>{S.value=Object.assign(o.value,e),O()},getFormOptions:()=>S.value,setItems:R,getItems:()=>u.value,appendItem:e=>{u.value.push(e),x()},removeItem:e=>{R(u.value.filter(l=>l.prop!==e)),x()},getItemByProp:T,setSearchBtnProps:e=>{o.value.searchBtnProps=Object.assign(o.value.searchBtnProps??{},e),P()},setResetBtnProps:e=>{o.value.resetBtnProps=Object.assign(o.value.resetBtnProps??{},e),P()}}),()=>y.ssr?j.value&&I():I()}}),$={install(c,n){c.component(F.name,F),c.provide("MaSearchOptions",n??{ssr:!1})}};m.MaSearch=$,m.default=$,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});