@ipscape/ips-dropdown
Version:
A dropdown component
2 lines • 8.09 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["ips-dropdown"]=t():e["ips-dropdown"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="77c0")}({"1ab5":function(e,t,n){},"24de":function(e,t,n){},"3b67":function(e,t,n){!function(t,n){e.exports=n()}(0,(function(){var e="__v-click-outside",t="undefined"!=typeof window,n="undefined"!=typeof navigator,r=t&&("ontouchstart"in window||n&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"];function o(e){var t=e.event,n=e.handler;(0,e.middleware)(t)&&n(t)}function i(t,n){var i=function(e){var t="function"==typeof e;if(!t&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:t?e:e.handler,middleware:e.middleware||function(e){return e},events:e.events||r,isActive:!(!1===e.isActive),detectIframe:!(!1===e.detectIframe),capture:!!e.capture}}(n.value),d=i.handler,a=i.middleware,s=i.detectIframe,l=i.capture;if(i.isActive){if(t[e]=i.events.map((function(e){return{event:e,srcTarget:document.documentElement,handler:function(e){return function(e){var t=e.el,n=e.event,r=e.handler,i=e.middleware,d=n.composedPath&&n.composedPath()||n.path;(d?d.indexOf(t)<0:!t.contains(n.target))&&o({event:n,handler:r,middleware:i})}({el:t,event:e,handler:d,middleware:a})},capture:l}})),s){var c={event:"blur",srcTarget:window,handler:function(e){return function(e){var t=e.el,n=e.event,r=e.handler,i=e.middleware;setTimeout((function(){var e=document.activeElement;e&&"IFRAME"===e.tagName&&!t.contains(e)&&o({event:n,handler:r,middleware:i})}),0)}({el:t,event:e,handler:d,middleware:a})},capture:l};t[e]=[].concat(t[e],[c])}t[e].forEach((function(n){var r=n.event,o=n.srcTarget,i=n.handler;return setTimeout((function(){t[e]&&o.addEventListener(r,i,l)}),0)}))}}function d(t){(t[e]||[]).forEach((function(e){return e.srcTarget.removeEventListener(e.event,e.handler,e.capture)})),delete t[e]}var a=t?{bind:i,update:function(e,t){var n=t.value,r=t.oldValue;JSON.stringify(n)!==JSON.stringify(r)&&(d(e),i(e,{value:n}))},unbind:d}:{};return{install:function(e){e.directive("click-outside",a)},directive:a}}))},"5a41":function(e,t,n){"use strict";n("1ab5")},"77c0":function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var i=function(){var e=this,t=e._self._c;return t("div",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.clickedOutside,expression:"clickedOutside"}],class:e.computedStyleClasses,attrs:{tabindex:e.tabindex},on:{keyup:[function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:(t.stopPropagation(),e.toggle.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"esc",27,t.key,["Esc","Escape"])?null:(t.stopPropagation(),e.closeDropDown.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"down",40,t.key,["Down","ArrowDown"])?null:(t.stopPropagation(),e.arrowDown.apply(null,arguments))},function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"up",38,t.key,["Up","ArrowUp"])?null:(t.stopPropagation(),e.arrowUp.apply(null,arguments))}]}},[t("div",{ref:"trigger",class:e.computedClasses,attrs:{"aria-haspopup":"true","aria-expanded":"false","aria-describedby":e.ariaDescribedBy},on:{click:e.toggle}},[e._t("trigger")],2),e._t("default",(function(){return[e.expand?t("ul",{staticClass:"ips-dropdown-menu dropdown-menu",class:{"dropdown-menu-end":e.dropRight,"overflow-auto":e.overflowScroll,"overflow-hidden":e.overflowHidden}},[e._t("items",null,{close:e.closeDropDown,open:e.openDropDown})],2):e._e()]}),{expand:e.expand})],2)},d=[],a=n("3b67"),s=n.n(a),l={name:"IpsDropdown",directives:{ClickOutside:s.a.directive},props:{ariaDescribedBy:{name:"aria-describedby",description:"Add the aria-describedby property. Important for accessibility",type:String,default:"",required:!1},classes:{name:"classes",description:"Add additional classes to the trigger",type:Array,default(){return[]},required:!1},disabled:{name:"disabled",description:"Disabled the dropdown",type:Boolean,default:!1,required:!1},disableOutsideClick:{name:"disableOutsideClick",description:"Disable native behaviour when clicking outside dropdown",type:Boolean,default:!1,required:!1},dropRight:{name:"dropRight",description:"Right align the dropdown list to the parent",type:Boolean,default:!1,required:!1},expanded:{name:"expanded",description:"Set the initial state of the dropdown on render",type:Boolean,default:!1,required:!1},tabindex:{name:"tabindex",description:"Add a tab index. Important for accessibility",type:Number,default:0,required:!1},onlyOpen:{name:"onlyOpen",description:"Does not close dropdown when toggle is called",type:Boolean,default:!1,required:!1},overflowScroll:{name:"overflowScroll",description:"Scrolling when dropdown content overflows",type:Boolean,default:!1,required:!1},overflowHidden:{name:"overflowHidden",description:"Hide overflow",type:Boolean,default:!1,required:!1}},data(){return{expand:this.expanded}},computed:{computedClasses(){const e=["ips","dropdown-trigger"];return this.classes.length>0&&this.classes.forEach(t=>{e.push(t)}),e},computedStyleClasses(){const e=["dropdown"];return this.disabled&&e.push("disabled"),this.classes.indexOf("dropup")>0&&e.push("dropup"),this.classes.indexOf("dropend")>0&&e.push("dropend"),this.classes.indexOf("dropstart")>0&&e.push("dropstart"),e}},watch:{expanded:{immediate:!0,handler(e){this.$nextTick(()=>{this.expand=e})}}},methods:{openDropDown(){this.expand=!0},closeDropDown(){this.expand=!1},arrowDown(){const e=Array.from(document.getElementsByClassName("dropdown-item")),t=e.indexOf(document.activeElement);t<e.length-1&&e[t+1].focus()},arrowUp(){const e=Array.from(document.getElementsByClassName("dropdown-item")),t=e.indexOf(document.activeElement);t>0&&e[t-1].focus()},toggle(){this.disabled||(this.onlyOpen?this.expand=!0:this.expand=!this.expand,this.$refs.trigger.setAttribute("aria-expanded",this.expand),this.$emit("toggle",{toggle:this.expand}))},clickedOutside(){this.disableOutsideClick||(this.$emit("clicked-outside"),this.closeDropDown())}}},c=l;n("5a41");function u(e,t,n,r,o,i,d,a){var s,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),r&&(l.functional=!0),i&&(l._scopeId="data-v-"+i),d?(s=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(d)},l._ssrRegister=s):o&&(s=a?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(l.functional){l._injectStyles=s;var c=l.render;l.render=function(e,t){return s.call(t),c(e,t)}}else{var u=l.beforeCreate;l.beforeCreate=u?[].concat(u,s):[s]}return{exports:e,options:l}}var p=u(c,i,d,!1,null,"417a08c3",null),f=p.exports,h=(n("24de"),f);t["default"]=h}})}));
//# sourceMappingURL=ips-dropdown.umd.min.js.map