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

Farris Vue, a Farris Design based Vue3 component library.

(function(c,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):(c=typeof globalThis<"u"?globalThis:c||self,t(c.dropdown={},c.Vue,c.dynamicResolver,c.designerCanvas))})(this,function(c,t,T,z){"use strict";function A(e,d,s){return d}const M=new Map([["appearance",T.resolveAppearance]]),O={$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"]},X={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"}}}}},V={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:()=>{}}},F=T.createPropsResolver(V,O,M,A,X);function j(e,d){const s=t.ref(e.show),p=t.ref(),f=t.ref(),y=t.ref(),u=()=>f.value,r=10,g=(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"],m=Array.from(document.body.querySelectorAll(o.join(","))).filter(i=>i).map(i=>{const{display:R,zIndex:S}=window.getComputedStyle(i);return R==="none"?0:parseInt(S,10)}).filter(i=>i);let l=Math.max(...m);return l<1040&&(l=1040),l+n},B=(n,o)=>{const{height:m,left:l,top:i,width:R}=n.getBoundingClientRect(),{width:S,height:E,top:re}=o.getBoundingClientRect();if(n.className.indexOf("dropdown-submenu")>-1||n.closest(".dropdown-submenu")||n.classList.contains("dropright")){const N=window.innerWidth-l-n.offsetWidth,$=window.innerHeight-i,{position:v}=getComputedStyle(o);if(v==="fixed"){let w=l+n.offsetWidth;o.offsetWidth>N&&l>N&&(w=l-S),o.style.left=w+"px",o.style.right="auto",window.innerHeight-2*r<o.offsetHeight?(o.style.top=r+"px",o.style.bottom=r+"px",o.style.maxHeight=window.innerHeight-2*r+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight?(o.style.top="auto",o.style.bottom=r+"px"):(o.style.top=i+"px",o.style.bottom="auto")}else{if(o.offsetWidth>N){const w=-S;o.style.left=w+"px"}window.innerHeight-2*r<o.offsetHeight?(o.style.top=-1*(i-r)+"px",o.style.bottom="auto",o.style.maxHeight=window.innerHeight-2*r+"px",o.style.overflowY="auto",o.className+=" dropdown-menu-maxheight"):$<o.offsetHeight&&(o.style.top=$-o.offsetHeight-r+"px",o.style.bottom="auto")}}else{const{marginTop:N,marginBottom:$}=getComputedStyle(o);let v=0;const w=Math.ceil(parseFloat(N))+Math.ceil(parseFloat($));let b=i+m,W=l;window.innerHeight-b-w<E&&(b=i-E,b<0&&(window.innerHeight-i-m>i?(b=i+m,v=window.innerHeight-b-w-r):(b=r,v=i-b-w))),window.innerWidth-l<S&&window.innerWidth-l<l+R&&(W=l-S+R),document.body.append(o),o.style.cssText=`position:fixed;bottom:unset;left:${W}px
             !important;top:${b}px !important;right: unset;${v?"max-height:"+v+"px;overflow-y:auto;":""}`,v&&(o.className+=" dropdown-menu-maxheight"),o.style.zIndex=g().toString()}},h=()=>{B(p.value,f.value)},a=()=>{var n,o;e.hover||(s.value=!1,f.value.style=null,document.removeEventListener("click",a),(n=u())==null||n.removeEventListener("click",a),document.removeEventListener("scroll",a),(o=u())==null||o.removeEventListener("scroll",a))},x=(n=null,o=!1)=>{var m,l;e.hover||e.disabled||(n==null||n.stopPropagation(),o?(setTimeout(()=>{h()}),s.value=!0):(s.value||setTimeout(()=>{h()}),s.value=!s.value),document.addEventListener("click",a),document.addEventListener("scroll",a),e.hideOnClick||((m=u())==null||m.addEventListener("click",i=>{i.stopPropagation()}),(l=u())==null||l.addEventListener("scroll",i=>{i.stopPropagation()})))};return{show:s,dropdownRef:p,dropdownMenuRef:f,clickEventRef:y,showDropMenu:n=>{x(n,!1)},showDropMenuByForce:x,hoverDropdown:n=>{e.hover&&(s.value||setTimeout(()=>{}),s.value=!s.value)},leftButtonClick:()=>{},closeDropMenu:a,selectItem:n=>{d.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,d){const s=t.ref(e.value),p=t.ref(e.label),f=t.ref(e.disabled),y=t.ref(e.active),u=t.ref(e.divide),r=()=>{f.value||d.emit("select",e)};return()=>t.createVNode("div",null,[t.withDirectives(t.createVNode("div",{class:"dropdown-divider"},null),[[t.vShow,u.value]]),t.createVNode("li",{class:`dropdown-item${y.value?" active":""} ${f.value?" disabled":""}`,onClick:r,title:s.value.toString()},[p.value])])}});function _(){const e=t.ref(!1);return t.onMounted(()=>{e.value=!0}),e}const H=t.defineComponent({name:"FDropdown",props:V,emits:["select"],setup(e,d){const s=t.ref(e.model),{show:p,dropdownMenuRef:f,dropdownRef:y,clickEventRef:u,showDropMenu:r,hoverDropdown:g,leftButtonClick:B,showDropMenuByForce:h,closeDropMenu:a}=j(e,d),x=_();function k(C){a(),d.emit("select",C)}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(()=>{p.value&&h(null,!0)}),()=>t.createVNode("div",{ref:y},[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:B},[e.title]),t.createVNode("span",{ref:u,class:["dropdown-toggle",{btn:!e.nest},{"dropdown-toggle-split":e.splitButton},...D()],style:"width:100%",onClick:r,onMouseenter:g,onMouseleave:g},[e.splitButton?"":e.title,e.iconClass&&t.createVNode("span",{class:`f-icon ${e.iconClass}`},null)]),x.value&&t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode("div",{ref:f,class:`dropdown-menu${p.value?" show":""}`},[t.createVNode(t.Fragment,null,[s.value.map(({label:C,value:I,disabled:q,active:n,divide:o})=>t.createVNode(L,{value:I.toString(),label:C,disabled:q,active:n,divide:o,onSelect:m=>k(m)},null))])])]})])])}}),Z=t.defineComponent({name:"FDropdownDesign",props:V,emits:["select"],setup(e,d){const s=t.ref(e.model),{show:p,showDropMenu:f,hoverDropdown:y,leftButtonClick:u}=j(e,d);function r(a){d.emit("select",a)}const g=t.ref(),B=t.inject("design-item-context"),h=z.useDesignerComponent(g,B);return t.onMounted(()=>{g.value.componentInstance=h}),d.expose(h.value),()=>t.createVNode("div",{ref:g},[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:u},[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:f,onMouseenter:y,onMouseleave:y},[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${p.value?" show":""}`},[t.createVNode(t.Fragment,null,[s.value.map(({label:a,value:x,disabled:k,active:D,divide:C})=>t.createVNode(L,{value:x.toString(),label:a,disabled:k,active:D,divide:C,onSelect:I=>r(I)},null))])])])])}}),G={install(e){e.component(H.name,H)},register(e,d,s,p){e.dropdown=H,d.dropdown=F},registerDesigner(e,d,s){e.dropdown=Z,d.dropdown=F}};c.Dropdown=H,c.default=G,c.dropdownProps=V,c.propsResolver=F,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});