buefy/dist/components/dropdown/index.min.js

Lightweight UI components for Vue.js (v3) based on Bulma

/*! Buefy v3.0.0 | MIT License | github.com/buefy/buefy */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Dropdown={},e.Vue)}(this,(function(e,t){"use strict";const i=(e,t=!1)=>e?t?e.querySelectorAll('*[tabindex="-1"]'):e.querySelectorAll('a[href]:not([tabindex="-1"]),\n                                     area[href],\n                                     input:not([disabled]),\n                                     select:not([disabled]),\n                                     textarea:not([disabled]),\n                                     button:not([disabled]),\n                                     iframe,\n                                     object,\n                                     embed,\n                                     *[tabindex]:not([tabindex="-1"]),\n                                     *[contenteditable]'):null;let o;const s={beforeMount:(e,{value:t=!0})=>{if(t){let t=i(e),s=i(e,!0);t&&t.length>0&&(o=o=>{t=i(e),s=i(e,!0);const n=t[0],l=t[t.length-1];o.target===n&&o.shiftKey&&"Tab"===o.key?(o.preventDefault(),l.focus()):(o.target===l||Array.from(s).indexOf(o.target)>=0)&&!o.shiftKey&&"Tab"===o.key&&(o.preventDefault(),n.focus())},e.addEventListener("keydown",o))}},unmounted:e=>{e.removeEventListener("keydown",o)}};let n=!0,l=!0;const a=["escape","outside"],d=Symbol("bdropdown");var r=t.defineComponent({name:"BDropdown",directives:{trapFocus:s},provide(){return{[d]:this}},props:{modelValue:{type:[String,Number,Boolean,Object,Array,Function],default:null},disabled:Boolean,inline:Boolean,scrollable:Boolean,maxHeight:{type:[String,Number],default:200},position:{type:String,validator:e=>["is-top-right","is-top-left","is-bottom-left","is-bottom-right"].indexOf(e)>-1},triggers:{type:Array,default:()=>["click"]},mobileModal:{type:Boolean,default:()=>n},ariaRole:{type:String,validator:e=>["menu","list","dialog"].indexOf(e)>-1,default:null},animation:{type:String,default:"fade"},multiple:Boolean,trapFocus:{type:Boolean,default:()=>l},closeOnClick:{type:Boolean,default:!0},canClose:{type:[Array,Boolean],default:!0},expanded:Boolean,appendToBody:Boolean,appendToBodyCopyParent:Boolean,triggerTabindex:{type:Number,default:0}},emits:{"active-change":e=>!0,change:e=>!0,"update:modelValue":e=>!0},data(){return{selected:this.modelValue,style:{},isActive:!1,isHoverable:!1,maybeTap:!1,isTouchEnabled:!1,_bodyEl:void 0,timeOutID:void 0,timeOutID2:void 0}},computed:{rootClasses(){return[this.position,{"is-disabled":this.disabled,"is-hoverable":this.hoverable,"is-inline":this.inline,"is-active":this.isActive||this.inline,"is-mobile-modal":this.isMobileModal,"is-expanded":this.expanded,"is-touch-enabled":this.isTouchEnabled}]},isMobileModal(){return this.mobileModal&&!this.inline},cancelOptions(){return"boolean"==typeof this.canClose?this.canClose?a:[]:this.canClose},contentStyle(){var e,t;return{maxHeight:this.scrollable&&null!=(t=this.maxHeight,e=void 0===t?null:isNaN(+t)?`${t}`:t+"px")?e:void 0,overflow:this.scrollable?"auto":void 0}},hoverable(){return this.triggers.indexOf("hover")>=0}},watch:{modelValue(e){this.selected=e},isActive(e){this.$emit("active-change",e),e||(this.timeOutID=setTimeout((()=>{this.isActive||(this.isTouchEnabled=!1)}),250)),this.handleScroll(),this.appendToBody&&this.$nextTick((()=>{this.updateAppendToBody()}))},isHoverable(e){this.hoverable&&this.$emit("active-change",e)}},methods:{handleScroll(){"undefined"!=typeof window&&this.isMobileModal&&(this.isActive?document.documentElement.classList.add("is-clipped-touch"):document.documentElement.classList.remove("is-clipped-touch"))},selectItem(e){if(this.multiple){if(this.selected){const t=this.selected;-1===t.indexOf(e)?this.selected=[...t,e]:this.selected=t.filter((t=>t!==e))}else this.selected=[e];this.$emit("change",this.selected)}else this.selected!==e&&(this.selected=e,this.$emit("change",this.selected));this.$emit("update:modelValue",this.selected),this.multiple||(this.isActive=!this.closeOnClick,this.hoverable&&this.closeOnClick&&(this.isHoverable=!1))},isInWhiteList(e){if(e===this.$refs.dropdownMenu)return!0;if(e===this.$refs.trigger)return!0;if(null!=this.$refs.dropdownMenu){const t=this.$refs.dropdownMenu.querySelectorAll("*");for(const i of t)if(e===i)return!0}if(null!=this.$refs.trigger){const t=this.$refs.trigger.querySelectorAll("*");for(const i of t)if(e===i)return!0}return!1},clickedOutside(e){if(this.cancelOptions.indexOf("outside")<0)return;if(this.inline)return;const t=null!=(i=this).$root&&"shadowRoot"in i.$root.$options?e.composedPath()[0]:e.target;var i;this.isInWhiteList(t)||(this.isActive=!1)},keyPress({key:e}){if(this.isActive&&("Escape"===e||"Esc"===e)){if(this.cancelOptions.indexOf("escape")<0)return;this.isActive=!1}},onClick(){-1===this.triggers.indexOf("hover")&&(this.triggers.indexOf("click")<0||this.toggle())},onContextMenu(){this.triggers.indexOf("contextmenu")<0||this.toggle()},onHover(){this.triggers.indexOf("hover")<0||this.isTouchEnabled||(this.isHoverable=!0)},onTouchStart(){this.maybeTap=!0},onTouchMove(){this.maybeTap=!1},onTouchEnd(e){-1!==this.triggers.indexOf("hover")&&this.maybeTap&&(e.preventDefault(),this.maybeTap=!1,this.isTouchEnabled=!0,this.toggle())},onFocus(){this.triggers.indexOf("focus")<0||this.toggle()},toggle(){this.disabled||(this.isActive?this.isActive=!this.isActive:this.timeOutID2=setTimeout((()=>{const e=!this.isActive;this.isActive=e})))},updateAppendToBody(){const e=this.$refs.dropdown,t=this.$refs.dropdownMenu,i=this.$refs.trigger;if(t&&i){const o=this.$data._bodyEl.children[0];if(o.classList.forEach((e=>o.classList.remove(e))),o.classList.add("dropdown"),o.classList.add("dropdown-menu-animation"),this.rootClasses.forEach((e=>{if(e&&"object"==typeof e)for(const t in e)e[t]&&o.classList.add(t)})),this.appendToBodyCopyParent){const e=this.$refs.dropdown.parentNode,t=this.$data._bodyEl;t.classList.forEach((e=>t.classList.remove(e))),e.classList.forEach((e=>{t.classList.add(e)}))}const s=i.getBoundingClientRect();let n=s.top+window.scrollY,l=s.left+window.scrollX;!this.position||this.position.indexOf("bottom")>=0?n+=i.clientHeight:n-=t.clientHeight,this.position&&this.position.indexOf("left")>=0&&(l-=t.clientWidth-i.clientWidth),this.style={position:"absolute",top:`${n}px`,left:`${l}px`,zIndex:"99",width:this.expanded?`${e.offsetWidth}px`:void 0}}}},mounted(){this.appendToBody&&(this.$data._bodyEl=function(e){const t=document.createElement("div");t.style.position="absolute",t.style.left="0px",t.style.top="0px",t.style.width="100%";const i=document.createElement("div");return t.appendChild(i),i.appendChild(e),document.body.appendChild(t),t}(this.$refs.dropdownMenu),this.updateAppendToBody())},created(){"undefined"!=typeof window&&(document.addEventListener("click",this.clickedOutside),document.addEventListener("keyup",this.keyPress))},beforeUnmount(){var e;"undefined"!=typeof window&&(document.removeEventListener("click",this.clickedOutside),document.removeEventListener("keyup",this.keyPress)),this.appendToBody&&(void 0!==(e=this.$data._bodyEl).remove?e.remove():void 0!==e.parentNode&&null!==e.parentNode&&e.parentNode.removeChild(e)),clearTimeout(this.timeOutID),clearTimeout(this.timeOutID2)}}),c=(e,t)=>{const i=e.__vccOpts||e;for(const[e,o]of t)i[e]=o;return i};const h=["tabindex"],u=["aria-hidden"],p=["aria-hidden"],m=["role","aria-modal"];var f=c(r,[["render",function(e,i,o,s,n,l){const a=t.resolveDirective("trap-focus");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["dropdown dropdown-menu-animation",e.rootClasses]),ref:"dropdown",onMouseleave:i[7]||(i[7]=t=>e.isHoverable=!1)},[e.inline?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("div",{key:0,tabindex:e.disabled?void 0:e.triggerTabindex,ref:"trigger",class:"dropdown-trigger",onClick:i[0]||(i[0]=(...t)=>e.onClick&&e.onClick(...t)),onContextmenu:i[1]||(i[1]=t.withModifiers(((...t)=>e.onContextMenu&&e.onContextMenu(...t)),["prevent"])),onMouseenter:i[2]||(i[2]=(...t)=>e.onHover&&e.onHover(...t)),onFocusCapture:i[3]||(i[3]=(...t)=>e.onFocus&&e.onFocus(...t)),onTouchstart:i[4]||(i[4]=(...t)=>e.onTouchStart&&e.onTouchStart(...t)),onTouchmove:i[5]||(i[5]=(...t)=>e.onTouchMove&&e.onTouchMove(...t)),onTouchend:i[6]||(i[6]=(...t)=>e.onTouchEnd&&e.onTouchEnd(...t)),"aria-haspopup":"true"},[t.renderSlot(e.$slots,"trigger",{active:e.isActive})],40,h)),t.createVNode(t.Transition,{name:e.animation},{default:t.withCtx((()=>[e.isMobileModal?t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,class:"background","aria-hidden":!e.isActive},null,8,u)),[[t.vShow,e.isActive]]):t.createCommentVNode("v-if",!0)])),_:1},8,["name"]),t.createVNode(t.Transition,{name:e.animation,persisted:""},{default:t.withCtx((()=>[t.withDirectives((t.openBlock(),t.createElementBlock("div",{ref:"dropdownMenu",class:"dropdown-menu",style:t.normalizeStyle(e.style),"aria-hidden":!e.isActive},[t.createElementVNode("div",{class:"dropdown-content",role:e.ariaRole,"aria-modal":!e.inline,style:t.normalizeStyle(e.contentStyle)},[t.renderSlot(e.$slots,"default")],12,m)],12,p)),[[t.vShow,!e.disabled&&(e.isActive||e.isHoverable)||e.inline],[a,e.trapFocus]])])),_:3},8,["name"])],34)}]]),v=t.defineComponent({name:"BDropdownItem",inject:{parent:{from:d,default:void 0}},props:{value:{type:[String,Number,Boolean,Object,Array,Function],default:null},separator:Boolean,disabled:Boolean,custom:Boolean,focusable:{type:Boolean,default:!0},paddingless:Boolean,hasLink:Boolean,ariaRole:{type:String,default:""}},emits:{click:()=>!0},computed:{anchorClasses(){return{"is-disabled":this.parent.disabled||this.disabled,"is-paddingless":this.paddingless,"is-active":this.isActive}},itemClasses(){return{"dropdown-item":!this.hasLink,"is-disabled":this.disabled,"is-paddingless":this.paddingless,"is-active":this.isActive,"has-link":this.hasLink}},ariaRoleItem(){return"menuitem"===this.ariaRole||"listitem"===this.ariaRole?this.ariaRole:void 0},isClickable(){return!(this.parent.disabled||this.separator||this.disabled||this.custom)},isActive(){return null!==this.parent.selected&&(this.parent.multiple?this.parent.selected.indexOf(this.value)>=0:this.value===this.parent.selected)},isFocusable(){return!this.hasLink&&this.focusable}},methods:{selectItem(){this.isClickable&&(this.parent.selectItem(this.value),this.$emit("click"))}}});const b={key:0,class:"dropdown-divider"},y=["role","tabindex"],g=["role","tabindex"];var k=c(v,[["render",function(e,i,o,s,n,l){return e.separator?(t.openBlock(),t.createElementBlock("hr",b)):e.custom||e.hasLink?(t.openBlock(),t.createElementBlock("div",{key:2,class:t.normalizeClass(e.itemClasses),onClick:i[1]||(i[1]=(...t)=>e.selectItem&&e.selectItem(...t)),role:e.ariaRoleItem,tabindex:e.isFocusable?0:void 0},[t.renderSlot(e.$slots,"default")],10,g)):(t.openBlock(),t.createElementBlock("a",{key:1,class:t.normalizeClass(["dropdown-item",e.anchorClasses]),onClick:i[0]||(i[0]=(...t)=>e.selectItem&&e.selectItem(...t)),role:e.ariaRoleItem,tabindex:e.isFocusable?0:void 0},[t.renderSlot(e.$slots,"default")],10,y))}]]);const x=(e,t,i)=>{const o=t.name;if(null==o)throw new Error("Buefy.registerComponent: missing component name");e.component(o,t)},w={install(e){x(e,f),x(e,k)}};e.BDropdown=f,e.BDropdownItem=k,e.default=w,Object.defineProperty(e,"__esModule",{value:!0})}));