vue-dropdown-advanced/dist/vue-dropdown-advanced.umd.min.js

A seriously advanced Vue Dropdown tool with many custom options.

(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vue-dropdown-advanced"]=e(require("vue")):t["vue-dropdown-advanced"]=e(t["Vue"])})("undefined"!==typeof self?self:this,function(t){return function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(s,n,function(e){return t[e]}.bind(null,n));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s="fb15")}({"8bbf":function(e,i){e.exports=t},b33c:function(t,e,i){},e42b:function(t,e,i){"use strict";var s=i("b33c"),n=i.n(s);n.a},f6fd:function(t,e){(function(t){var e="currentScript",i=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(s){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(s.stack)||[!1])[1];for(t in i)if(i[t].src==e||"interactive"==i[t].readyState)return i[t];return null}}})})(document)},fb15:function(t,e,i){"use strict";var s;(i.r(e),"undefined"!==typeof window)&&(i("f6fd"),(s=window.document.currentScript)&&(s=s.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(i.p=s[1]));var n,o=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{ref:"mydropdown",staticClass:"vdda-container",style:t.getStyle},[i("div",{staticClass:"vdda-dropdown-list"},t._l(t.my_items,function(e){return i("div",{key:e.key,class:e.getClass,on:{click:function(i){return i.stopPropagation(),i.preventDefault(),t.clickFromTempl(e)}}},[e.isHeaderItem?i("div",{staticClass:"vdda-dropdown-item"},[t._v("\n          "+t._s(e.text)+"\n      ")]):e.isActionItem?i("div",{staticClass:"vdda-dropdown-item"},[e.hasImg?i("span",[i("span",{class:e.imgClass})]):t._e(),i("span",{staticClass:"flex"},[t._v("\n            "+t._s(e.text)+"\n          ")]),t._l(e.imagesRight,function(s,n){return i("span",{key:n,on:{click:function(i){return i.stopPropagation(),i.preventDefault(),t.clickFromTempl(e,s)}}},[i("span",{class:s.imgClass,attrs:{title:s.toolTip}})])})],2):e.isRadioboxItem||e.isCheckboxItem?i("div",{staticClass:"vdda-dropdown-item"},[i("span",{class:e.imgClass}),i("span",{staticClass:"flex"},[t._v("\n            "+t._s(e.text)+"\n          ")])]):t._e()])}),0)])},r=[],h=i("8bbf"),a=i.n(h);function c(){var t="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0,i="x"==t?e:3&e|8;return i.toString(16)});return t}function l(t=5){var e=c();return e=e.substr(e.length-t),e}function d(t,e){return t.constructor.toString()===e.toString()}function u(t){if(t){var e=t.getBoundingClientRect(),i=document.body,s=document.documentElement,n=window.pageYOffset||s.scrollTop||i.scrollTop,o=window.pageXOffset||s.scrollLeft||i.scrollLeft,r=s.clientTop||i.clientTop||0,h=s.clientLeft||i.clientLeft||0,a=e.top+n-r;a=Math.round(a);var c=e.left+o-h;c=Math.round(c);var l=t.offsetHeight,d=t.offsetWidth,u=a+l,p=c+d,m=window.innerHeight-a,g=window.innerWidth-p;return{top:a,left:c,height:l,width:d,bottom:u,right:p,topFromWindow:m,rightFromWindow:g}}}function p(t){return new Promise(e=>setTimeout(()=>e(),t))}(function(t){t[t["DownRight"]=0]="DownRight",t[t["DownLeft"]=1]="DownLeft",t[t["UpRight"]=2]="UpRight",t[t["UpLeft"]=3]="UpLeft"})(n||(n={}));class m{constructor(t="",e=""){this.key="",this.text="",this.isDisabled=!1,this.data=void 0,t||(t=l()),this.key=t,this.text=e}get isActionItem(){return d(this,w)}get isRadioboxItem(){return d(this,v)}get isCheckboxItem(){return d(this,x)}get isSeperatorItem(){return d(this,g)}get isHeaderItem(){return d(this,f)}getBaseClass(t){return t+" "+(this.isDisabled?"disabled":"")}}class g extends m{constructor(){super("","")}get getClass(){return"seperator"}getStyle(){return{class:["da-dropdown-item seperator"]}}}class f extends m{constructor(t){super("",t)}get getClass(){return"header"}getStyle(){return{class:["vdda-dropdown-item "]}}}class w extends m{constructor(t,e,i,s,n){super(t,e),this.clicked=void 0,this.imageLeft="",this.imagesRight=[],this.imageLeft=i||"",this.isDisabled=s||!1,this.clicked=n}get hasImg(){return this.imageLeft.length>0}get getClass(){return this.getBaseClass("action")}get imgClass(){return"img img-left mdi "+this.imageLeft}addRightImage(t,e){this.imagesRight.push(new k(t,e))}ToString(){return`*ActionItem* ${this.text} [${this.key}]`}click(t){return!this.isDisabled&&(this.clicked&&this.clicked(this),!0)}}class y extends w{constructor(){super(...arguments),this.isChecked=!1,this.groupBy=""}toString(){return`*CheckedItem* ${this.text} [${this.key}] - ${this.isChecked} [groupBy: ${this.groupBy}]`}}class x extends y{constructor(t,e,i=!1){super(t,e),this.isChecked=i}get getClass(){return this.getBaseClass("checkbox")}get imgClass(){let t="img-check ";return this.isChecked&&(t+=" checked "),t}click(t){return!this.isDisabled&&(this.isChecked=!this.isChecked,!1)}}class v extends y{constructor(t,e,i="",s=!1){super(t,e),this.groupBy=i,this.isChecked=s}get getClass(){return this.getBaseClass("radiobox")}get imgClass(){let t="img-check option";return this.isChecked&&(t+=" checked "),t}click(t){return!this.isDisabled&&(t.filter(t=>t.isRadioboxItem&&t.groupBy==this.groupBy).forEach(t=>t.isChecked=!1),this.isChecked=!0,!1)}}class k{constructor(t,e){this.imageRight="",this.toolTip="",this.imageRight=t,this.toolTip=e||""}get imgClass(){return"img img-border img-right mdi "+this.imageRight}}class b{constructor(){this.$element=null,this.show=!1,this.my_direction=n.DownRight,this.my_items=[]}}class C{constructor(t,e,i){this.item=void 0,this.items=[],this.imageOnRight=void 0,this.item=t,this.items=e,this.imageOnRight=i}}let _=a.a.extend({name:"DropDownMenu",props:{parent:{type:HTMLDivElement},items:{type:Array,default:function(){return[]}},itemsAsync:{type:Function},click:{type:Function},direction:{type:[String],default:function(){return"down-right"},validator:function(t){return t=t.toLowerCase(),-1!==["down-right","down-left","up-right","up-left"].indexOf(t)}},minWidth:{type:String,default:function(){return"0"}},maxWidth:{type:String,default:function(){return"0"}},maxHeight:{type:String,default:function(){return"0"}}},data:()=>new b,methods:{clickFromTempl(t,e){if(t.isHeaderItem||t.isSeperatorItem||t.isDisabled)return;let i=t.click(this.items);i&&this.toggle();let s=new C(t,this.items,e);this.$nextTick(t=>{this.click&&this.click(s),this.$emit("click",s)})},getCoords(){let t=this.$element;if(!t)return{};let e=u(t);return e},close(t){this.$element.contains(t.target)||this.toggle()},setDropDownItems(t){this.my_items=t,this.$nextTick(t=>this.setTitleAttributesIfNeccesary())},setTitleAttributesIfNeccesary(){let t=this.$element.querySelectorAll("div.vdda-dropdown-list .flex");t.forEach(t=>{t.setAttribute("title",""),t.offsetWidth<t.scrollWidth&&t.setAttribute("title",t.innerText)})},async toggle(){if(this.show=!this.show,this.show)if(this.itemsAsync){let t=await this.itemsAsync();this.show&&this.setDropDownItems(t)}else this.items&&this.setDropDownItems(this.items);else this.setDropDownItems([])}},computed:{getStyle(){let t=this.getCoords();if(!t)return{};let e=t.height+"px",i={position:"absolute",display:this.show?"inline-block":"none"};return this.my_direction!=n.DownRight&&this.my_direction!=n.UpRight||(i.left="-2px"),this.my_direction!=n.DownLeft&&this.my_direction!=n.UpLeft||(i.right="-2px"),this.my_direction!=n.UpLeft&&this.my_direction!=n.UpRight||(i.bottom=e),this.my_direction!=n.DownLeft&&this.my_direction!=n.DownRight||(i.top=e),i}},watch:{show:function(t){t?document.addEventListener("click",this.close):document.removeEventListener("click",this.close)}},components:{},mounted(){let t=this.$refs.mydropdown;this.$element=this.parent||t.parentElement,this.my_direction=n.DownRight,"string"===typeof this.direction?"down-left"==this.direction?this.my_direction=n.DownLeft:"up-left"==this.direction?this.my_direction=n.UpLeft:"up-right"==this.direction&&(this.my_direction=n.UpRight):this.direction&&(this.my_direction=this.direction),a.a.nextTick(()=>{let t=this.$element.querySelector("div.vdda-dropdown-list");"0"!=this.minWidth&&(t.style.minWidth=this.minWidth),"0"!=this.maxWidth&&(t.style.maxWidth=this.maxWidth),"0"!=this.maxHeight&&(t.style.maxHeight=this.maxHeight);var e=""==this.$element.position||"static"==this.$element.position;e||(this.$element.style.position="relative"),this.$element.addEventListener("click",this.toggle)})},beforeDestroy(){this.$element.addEventListener("click",this.toggle)}});class D{constructor(t){this._element=null,this._show=!1,this.openOnCreate=!1,this.direction="down-right",this.minWidth="0",this.maxWidth="0",this.maxHeight="0",this._element=t}createMenu(){let t={parent:this._element,items:this.items,itemsAsync:this.itemsAsync,direction:this.direction,click:this.onClick,minWidth:this.minWidth,maxWidth:this.maxWidth,maxHeight:this.maxHeight},e=new _({propsData:t});var i=e.$mount();this._element.appendChild(i.$el),this.openOnCreate&&a.a.nextTick(()=>this._element.click())}}var S=_;i("e42b");function I(t,e,i,s,n,o,r,h){var a,c="function"===typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=i,c._compiled=!0),s&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),r?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=a):n&&(a=h?function(){n.call(this,this.$root.$options.shadowRoot)}:n),a)if(c.functional){c._injectStyles=a;var l=c.render;c.render=function(t,e){return a.call(e),l(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}var R=I(S,o,r,!1,null,null,null),$=R.exports;const T=(t="")=>{var e=[];if("simple"==t&&(e.push(new w("A","Holiday in France","",!1,t=>alert(t.key))),e.push(new g),e.push(new w("B","Go to California ")),e.push(new w("C","Visit the United Kingdom"))),"logout-simple"==t&&(e.push(new w("logout","Logout","mdi-exit-run",!1,t=>alert(t.key))),e.push(new g),e.push(new w("profile","Show Profile","mdi-face")),e.push(new w("shortcuts","Show Shortcuts","mdi-access-point")),e.push(new w("setting","System Settings and a whole lot more and stuff","mdi-cogs"))),"logout"==t){var i=new w("A","Logout Show outstanding alerts","mdi-cloud-download",!0);i.data={pos:t},i.addRightImage("mdi-cogs","settings"),i.addRightImage("mdi-exit-to-app","exit the application"),e.push(i),e.push(new g),i=new w("profile","Show User Profile","mdi-face"),i.addRightImage("fa-mail-forward","forward this item"),e.push(i),e.push(new w("bell","Show outstanding alerts","mdi-bell-ring")),e.push(new w("shortcuts","Show Bitcoin Valuation","mdi-bitcoin")),e.push(new w("setting","System Settings","mdi-cogs"))}if("options-simple"==t&&(e.push(new f("Choose your activities:")),e.push(new x("beach","Visit the beach")),e.push(new x("town","Walk through town")),e.push(new x("museum","Visit musea")),e.push(new x("hirecar","Hire a car")),e.push(new x("nothing","Do absolutely nothing and less then that!"))),"options"==t&&(e.push(new v("keyZ","My Option 1","A")),e.push(new v("keyA","My Option 2","A",!0)),e.push(new g),e.push(new w("keyX1","Take Action X1")),e.push(new w("keyX2","Take Action X2")),e.push(new g),e.push(new x("keyA2","Buy Apples",!0)),e.push(new x("keyB2","Buy Bananas",!0)),e.push(new x("keyC2","Buy Pomegranates")),e.push(new g),e.push(new v("keyO2","Haarlem is the best place to live","C")),e.push(new v("keyO3","Amsterdam is the best place to live","C"))),"showcase"==t){i=new w("booknow","Book now!","mdi-airplane-takeoff");i.data={pos:t},i.addRightImage("mdi-cogs","settings"),i.addRightImage("mdi-exit-to-app","exit the application"),e.push(i),e.push(new g),e.push(new f("Choose your destination:")),e.push(new v("california","California and Santa Monica","A")),e.push(new v("newyork","New York","A")),e.push(new v("miami","Miami","A")),e.push(new g),e.push(new f("Mode of transport:")),e.push(new v("car","By car","B")),e.push(new v("boat","By boat","B",!0)),e.push(new v("plane","By plane","B")),e.push(new g),e.push(new f("Choose your activities:")),e.push(new x("beach","Visit the beach")),e.push(new x("town","Walk through town")),e.push(new x("park","Visit Parks")),e.push(new x("hirecar","Hire a car")),e.push(new x("nothing","Do absolutely nothing !"))}return e};var A={DropDownMenu:$,DropDownControl:D,DropDownInfo:C,DropDownItemBase:m,ActionItem:w,SeperatorItem:g,CheckboxItem:x,RadioboxItem:v,RightImageInfo:k,HeaderItem:f,DropDownDirection:n,getTestItems:T,delay:p,createGuidRight5:l};e["default"]=A}})["default"]});