@farris/ui-vue/components/dropdown/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.dropdown={},f.Vue,f.dynamicResolver,f.designerCanvas))})(this,function(f,t,j,z){"use strict";function A(e,r,l){return r}const M=new Map([["appearance",j.resolveAppearance]]),X={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/dropdown.schema.json",title:"dropdown",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for dropdown",type:"string"},type:{description:"The type string of dropdown",type:"string",default:"dropdown"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},O={title:"dropdown",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}},behavior:{description:"Basic Infomation",title:"行为",properties:{readonly:{description:"",title:"只读",type:"string"},required:{description:"",title:"必填",type:"boolean"},visible:{description:"",title:"可见",type:"boolean"},placeholder:{description:"",title:"提示文本",type:"string"},tabindex:{description:"",title:"tab索引",type:"number"}}}}},H={show:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},title:{type:String,default:"下拉示例"},size:{type:String,default:""},type:{type:String,default:"primary"},iconClass:{type:String,default:""},active:{type:Boolean,default:!1},splitButton:{type:Boolean,default:!1},position:{type:String,default:"bottom"},model:{type:Array,default:[{label:"项目一",value:"XM1"},{label:"项目二",value:"XM2"},{label:"项目三",value:"XM3"}]},onSelect:{type:Function,default:()=>{}}},T=j.createPropsResolver(H,X,M,A,O);function F(e,r){let l;const i=t.ref(e.show),m=t.ref(),p=t.ref(),w=t.ref(),s=10;t.onMounted(()=>{l=p.value});const b=(n=1)=>{const o=["body>.f-datagrid-settings-simple-host","body>div","body>farris-dialog>.farris-modal.show","body>.farris-modal.show","body>farris-filter-panel>.f-filter-panel-wrapper","body .f-sidebar-show>.f-sidebar-main","body>.popover.show","body>filter-row-panel>.f-datagrid-filter-panel","body>.f-section-maximize"],u=Array.from(document.body.querySelectorAll(o.join(","))).filter(d=>d).map(d=>{const{display:R,zIndex:B}=window.getComputedStyle(d);return R==="none"?0:parseInt(B,10)}).filter(d=>d);let c=Math.max(...u);return c<1040&&(c=1040),c+n},x=(n,o)=>{const{height:u,left:c,top:d,width:R}=n.getBoundingClientRect(),{width:B,height:E,top:se}=o.getBoundingClientRect();if(n.className.indexOf("dropdown-submenu")>-1||n.closest(".dropdown-submenu")||n.classList.contains("dropright")){const N=window.innerWidth-c-n.offsetWidth,$=window.innerHeight-d,{position:v}=getComputedStyle(o);if(v==="fixed"){let y=c+n.offsetWidth;o.offsetWidth>N&&c>N&&(y=c-B),o.style.left=y+"px",o.style.right="auto",window.innerHeight-2*s<o.offsetHeight?(o.style.top=s+"px",o.style.bottom=s+"px",o.style.maxHeight=window.innerHeight-2*s+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight?(o.style.top="auto",o.style.bottom=s+"px"):(o.style.top=d+"px",o.style.bottom="auto")}else{if(o.offsetWidth>N){const y=-B;o.style.left=y+"px"}window.innerHeight-2*s<o.offsetHeight?(o.style.top=-1*(d-s)+"px",o.style.bottom="auto",o.style.maxHeight=window.innerHeight-2*s+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight&&(o.style.top=$-o.offsetHeight-s+"px",o.style.bottom="auto")}}else{const{marginTop:N,marginBottom:$}=getComputedStyle(o);let v=0;const y=Math.ceil(parseFloat(N))+Math.ceil(parseFloat($));let g=d+u,W=c;window.innerHeight-g-y<E&&(g=d-E,g<0&&(window.innerHeight-d-u>d?(g=d+u,v=window.innerHeight-g-y-s):(g=s,v=d-g-y))),window.innerWidth-c<B&&window.innerWidth-c<c+R&&(W=c-B+R),document.body.append(o),o.style.cssText=`position:fixed;bottom:unset;left:${W}px
             !important;top:${g}px !important;right: unset;${v?"max-height:"+v+"px;overflow-y:auto;":""}`,v&&(o.className+=" dropdown-menu-maxheight"),o.style.zIndex=b().toString()}},h=()=>{x(m.value,p.value)},a=()=>{e.hover||(i.value=!1,p.value.style=null,document.removeEventListener("click",a),l.removeEventListener("click",a),document.removeEventListener("scroll",a),l.removeEventListener("scroll",a))},C=(n=null,o=!1)=>{e.hover||e.disabled||(n==null||n.stopPropagation(),o?(setTimeout(()=>{h()}),i.value=!0):(i.value||setTimeout(()=>{h()}),i.value=!i.value),document.addEventListener("click",a),document.addEventListener("scroll",a),e.hideOnClick||(l.addEventListener("click",u=>{u.stopPropagation()}),l.addEventListener("scroll",u=>{u.stopPropagation()})))};return{show:i,dropdownRef:m,dropdownMenuRef:p,clickEventRef:w,showDropMenu:n=>{C(n,!1)},showDropMenuByForce:C,hoverDropdown:n=>{e.hover&&(i.value||setTimeout(()=>{}),i.value=!i.value)},leftButtonClick:()=>{},closeDropMenu:a,selectItem:n=>{r.emit("select",n)},resolveSize:n=>{const o=/px|em|rem|pt|%/;return o.test(n)?`${parseInt(n,10)}${n.match(o)[0]}`:`${n}px`}}}const Y={label:{type:String,default:"XM1"},value:{type:String||Number,default:"项目一"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},divide:{type:Boolean,default:!1},onSelect:{type:Function,default:()=>{}}},L=t.defineComponent({name:"FDropdownItem",props:Y,emits:["select"],setup(e,r){const l=t.ref(e.value),i=t.ref(e.label),m=t.ref(e.disabled),p=t.ref(e.active),w=t.ref(e.divide),s=()=>{m.value||r.emit("select",e)};return()=>t.createVNode("div",null,[t.withDirectives(t.createVNode("div",{class:"dropdown-divider"},null),[[t.vShow,w.value]]),t.createVNode("li",{class:`dropdown-item${p.value?" active":""} ${m.value?" disabled":""}`,onClick:s,title:l.value.toString()},[i.value])])}}),V=t.defineComponent({name:"FDropdown",props:H,emits:["select"],setup(e,r){const l=t.ref(e.model),i=t.ref(!1),{show:m,dropdownMenuRef:p,dropdownRef:w,clickEventRef:s,showDropMenu:b,hoverDropdown:x,leftButtonClick:h,showDropMenuByForce:a,closeDropMenu:C}=F(e,r);function k(S){C(),r.emit("select",S)}function D(){return[{"dropdown-item":e.nest},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"},{"btn-secondary":e.type==="secondary"},{"btn-link":e.type==="link"},{disabled:e.disabled}]}return t.onMounted(()=>{i.value=!0,m.value&&a(null,!0)}),()=>t.createVNode("div",{ref:w},[t.createVNode("div",{class:["farris-dropdown","btn-group",{dropup:e.position==="top"},{dropdown:e.position==="bottom"},{dropleft:e.position==="left"},{dropright:e.position==="right"}]},[e.splitButton&&t.createVNode("span",{class:["btn",...D()],style:"width:100%",onClick:h},[e.title]),t.createVNode("span",{ref:s,class:["dropdown-toggle",{btn:!e.nest},{"dropdown-toggle-split":e.splitButton},...D()],style:"width:100%",onClick:b,onMouseenter:x,onMouseleave:x},[e.splitButton?"":e.title,e.iconClass&&t.createVNode("span",{class:`f-icon ${e.iconClass}`},null)]),i.value&&t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode("div",{ref:p,class:`dropdown-menu${m.value?" show":""}`},[l.value.map(({label:S,value:I,disabled:q,active:n,divide:o})=>t.createVNode(L,{value:I.toString(),label:S,disabled:q,active:n,divide:o,onSelect:u=>k(u)},null))])]})])])}}),_=t.defineComponent({name:"FDropdownDesign",props:H,emits:["select"],setup(e,r){const l=t.ref(e.model),{show:i,showDropMenu:m,hoverDropdown:p,leftButtonClick:w}=F(e,r);function s(a){r.emit("select",a)}const b=t.ref(),x=t.inject("design-item-context"),h=z.useDesignerComponent(b,x);return t.onMounted(()=>{b.value.componentInstance=h}),r.expose(h.value),()=>t.createVNode("div",{ref:b},[t.createVNode("div",{class:["farris-dropdown","btn-group",{dropup:e.position==="top"},{dropdown:e.position==="bottom"},{dropleft:e.position==="left"},{dropright:e.position==="right"}],style:{width:e.width}},[e.splitButton&&t.createVNode("span",{class:["btn",{"dropdown-item":e.nest},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"}],style:"width:100%",onClick:w},[e.title]),t.createVNode("span",{class:["dropdown-toggle",{btn:!e.nest},{"dropdown-item":e.nest},{"dropdown-toggle-split":e.splitButton},{"btn-lg":e.size==="large"},{"btn-sm":e.size==="small"},{"btn-primary":e.type==="primary"},{"btn-success":e.type==="success"},{"btn-warning":e.type==="warning"},{"btn-danger":e.type==="danger"},{"btn-info":e.type==="info"},{"btn-secondary":e.type==="secondary"},{"btn-link":e.type==="link"},{disabled:e.disabled}],style:"width:100%",onClick:m,onMouseenter:p,onMouseleave:p},[t.withDirectives(t.createVNode("span",{class:"sr-only"},null),[[t.vShow,e.splitButton]]),e.splitButton?"":e.title,t.withDirectives(t.createVNode("span",{class:`f-icon ${e.iconClass.toString()}`},null),[[t.vShow,e.iconClass]])]),t.createVNode("div",{class:`dropdown-menu${i.value?" show":""}`},[t.createVNode(t.Fragment,null,[l.value.map(({label:a,value:C,disabled:k,active:D,divide:S})=>t.createVNode(L,{value:C.toString(),label:a,disabled:k,active:D,divide:S,onSelect:I=>s(I)},null))])])])])}}),Z={install(e){e.component(V.name,V)},register(e,r,l,i){e.dropdown=V,r.dropdown=T},registerDesigner(e,r,l){e.dropdown=_,r.dropdown=T}};f.Dropdown=V,f.default=Z,f.dropdownProps=H,f.propsResolver=T,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});