@persagy2/meri-design/dark/DropDownButton/index.js

fork from meri-design and extend it.

/*!
 * @@persagy2/meri-design v1.4.9-extend.2
 * (c) 2019-2020 xiongshuang
 * Released under the MIT License.
 * 2022-12-07 10:32:51
 */
var t,e;t=this,e=function(t){return function(){"use strict";var e={2205:function(e){e.exports=t}},i={};function o(t){var n=i[t];if(void 0!==n)return n.exports;var s=i[t]={exports:{}};return e[t](s,s.exports,o),s.exports}o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,{a:e}),e},o.d=function(t,e){for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return function(){function t(t,e,i,o,n,s,r,d){var p,a="function"==typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=i,a._compiled=!0),o&&(a.functional=!0),s&&(a._scopeId="data-v-"+s),r?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},a._ssrRegister=p):n&&(p=d?function(){n.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:n),p)if(a.functional){a._injectStyles=p;var l=a.render;a.render=function(t,e){return p.call(e),l(t,e)}}else{var u=a.beforeCreate;a.beforeCreate=u?[].concat(u,p):[p]}return{exports:t,options:a}}o.r(n),o.d(n,{default:function(){return h}});var e=t({},(function(){var t=this._self._c;return t("svg",{attrs:{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("path",{staticClass:"svg-fill-grey-500",attrs:{d:"\r\n          M8.3904344,6.48804301\r\n          L11.350122,10.1876525\r\n          C11.5226268,10.4032834 11.4876661,10.7179296 11.2720351,10.8904344\r\n          C11.1833786,10.9613596 11.0732233,11 10.9596876,11\r\n          L5.04031242,11\r\n          C4.76417005,11 4.54031242,10.7761424 4.54031242,10.5\r\n          C4.54031242,10.3864643 4.5789528,10.276309 4.64987802,10.1876525\r\n          L7.6095656,6.48804301\r\n          C7.78207037,6.27241204 8.09671656,6.23745135 8.31234752,6.40995612\r\n          C8.34117988,6.43302201 8.36736852,6.45921065 8.3904344,6.48804301\r\n          Z",transform:"translate(0, -0.5)"}})])}),[],!1,null,null,null).exports,i=o(2205),s=o.n(i),r=t({name:"DropList",data:function(){return{position:!0,place:"right",disabledItem:!1,right:0,type:"default",interactive:"hover",size:"medium",dropDownType:"default",dropDownList:[],dropDownListShow:!1,dropDownShow:!1,id:null,m:{}}},methods:{focus:function(){this.$el.focus()},blur:function(){this.$el.blur()}}},(function(){var t=this,e=t._self._c;return t.dropDownListShow?e("transition",{attrs:{name:t.position?"selectDownUpExtend":"selectDownUpExtendTop"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:t.dropDownShow,expression:"dropDownShow"}],staticClass:"drop-list-surround",class:"drop-list-".concat(t.type," drop-list-").concat(t.size," ").concat(t.disabledItem?"disable-element":""," drop-list-padding-").concat(t.position?"top":"btm"),style:"top:"+(t.position?t.m.offsetTop-1:t.m.offsetTop+1)+"px; "+t.place+": "+t.right+"px; ",attrs:{tabindex:-1},on:{mouseleave:t.buttonLeave,mouseenter:t.buttonEnter}},[e("div",{staticClass:"drop-list"},[e("div",{staticClass:"drop-list-inner",on:{wheel:function(t){t.stopPropagation()}}},t._l(t.dropDownList,(function(i,o){return e("div",{key:i.id?i.id:o,class:{active:t.active&&i.id===t.id&&!i.disabled,disabled:i.disabled,"drop-item":i.id!==t.id&&!i.disabled},on:{click:function(e){return t.choose(i)}}},[t._v(t._s(i.name))])})),0)])])]):t._e()}),[],!1,null,null,null).exports,d=s().extend(r),p=null,a=function(t){return(p=new d({data:{type:t.type,place:t.place,interactive:t.interactive,id:t.id,size:t.size,dropDownList:t.dropDownList,dropDownType:t.dropDownType,m:t.m,right:t.right,active:t.active},methods:{choose:t.choose,buttonLeave:t.buttonLeave,buttonEnter:t.buttonEnter}})).vm=p.$mount(),t.dom.appendChild(p.vm.$el),p},l=function(t,e,i,o){var n=e.scrollHeight,s=e.clientWidth,r=window,d=r.pageYOffset,p=r.pageXOffset,a=t.getBoundingClientRect(),l=a.top,u=a.left,c=a.height,h=d+l+c,f=s-(u+p+a.width),v="right",w=!0;return h+i>n&&(h=d+l-i-4,w=!1),f+o>s&&(f=u+p,v="left"),{X:f,Y:h,P:w,H:c,place:v}},u=function(t){if(t&&!t._isDestroyed){t.$destroy();var e=t.$el;e&&e.parentNode.removeChild(e)}},c=t({name:"DropDownButton",components:{TriangleSvg:e},data:function(){return{mouseStatus:!1,triangle:!1,i:null,id:null,listI:null}},props:{type:{type:String,default:"default"},interactive:{type:String,default:"hover"},value:{default:""},text:{type:String,default:""},disabled:{type:Boolean,default:!1},dropDownType:{type:String,default:"default"},dropDownList:{type:Array,default:function(){return[]}},size:{type:String,default:"medium"},transfer:{type:String,default:""},active:{type:Boolean,default:!0}},mounted:function(){this.transfer&&document.getElementById(this.transfer).addEventListener("scroll",this.listenScroll),window.addEventListener("mousewheel",this.listenScroll,!1),document.addEventListener("click",this.bodyClick)},destroyed:function(){window.removeEventListener("mousewheel",this.listenScroll),window.removeEventListener("click",this.bodyClick),this.dropList&&u(this.dropList)},methods:{bodyClick:function(t){var e=this;this.$el.contains(t.target)||this.dropList&&this.dropList.$el.contains(t.target)||(this.listI=setTimeout((function(){e.listI=null,e.triangle=!1,e.dropList&&(e.dropList.dropDownShow=!1)}),180))},listenScroll:function(){this.dropList&&this.dropList.dropDownShow&&!this.mouseStatus&&(this.dropList.dropDownShow=!1)},initComponent:function(){if(("primary"===this.type||"default"===this.type)&&this.dropDownType&&"default"!==this.dropDownType){var t=this.$el,e=document.body,i=this.dropDownList.length>5?197:38*this.dropDownList.length+21,o=l(t,e,i,240),n=o.X,s=o.Y,r=o.P,d=o.H,p=o.place;this.id=this.value,this.dropList=a({m:{offsetTop:s,offsetHeight:d},dom:e,right:n,place:p,position:r,active:this.active,size:this.size,interactive:this.interactive,id:this.id,type:this.type,dropDownList:this.dropDownList,dropDownType:this.dropDownType,choose:this.choose,buttonLeave:this.buttonLeave,buttonEnter:this.buttonEnter})}},resize:function(){var t=this;this.$nextTick((function(){if(t.dropList){var e=t.$el,i=document.body,o=t.dropDownList.length>5?190:38*t.dropDownList.length+19,n=l(e,i,o,240),s=n.X,r=n.Y,d=n.P,p=n.H,a=n.place;t.dropList.m.offsetTop=r,t.dropList.m.offsetHeight=p,t.dropList.place=a,t.dropList.right=s,t.dropList.position=d,t.dropList.winWidth=document.body.offsetWidth}}))},buttonEnter:function(t){var e=this;this.mouseStatus=!0,"disabled"===this.type||this.disabled||"left"===t&&"split-drop"===this.dropDownType||"tap"===this.interactive||(this.dropList?this.resize():this.initComponent(),this.triangle=!0,this.dropList&&(this.i&&clearTimeout(this.i),this.dropList.dropDownListShow=!0,this.$nextTick((function(){e.dropList.dropDownShow=!0}))))},buttonLeave:function(){var t=this;this.mouseStatus=!1,"disabled"!==this.type&&!this.disabled&&"tap"!==this.interactive&&this.dropList&&this.dropList.dropDownShow&&(this.i=setTimeout((function(){t.triangle=!1,t.dropList&&(t.dropList.dropDownShow=!1,t.i&&clearTimeout(t.i))}),150))},choose:function(t){var e=this;t.disabled||(this.$emit("change",t),this.dropList.disabledItem=!0,this.triangle=!1,this.$emit("input",t.id),this.id=t.id,this.dropList.dropDownShow=!1,this.dropList.id=t.id,this.resize(),setTimeout((function(){e.$nextTick((function(){e.dropList.disabledItem=!1}))}),450))},handleClick:function(){"disabled"===this.type||this.disabled||(this.$emit("click"),"tap"!==this.interactive||"drop"!==this.dropDownType&&"default-drop"!==this.dropDownType||this.handleRightClick())},handleRightClick:function(){var t=this;if("disabled"!==this.type&&!this.disabled&&"tap"===this.interactive){if(this.dropList?this.resize():this.initComponent(),this.listI)return this.triangle=!this.triangle,this.dropList.dropDownShow=!this.dropList.dropDownShow,this.dropList.dropDownShow&&this.$nextTick((function(){t.dropList.dropDownShow&&t.dropList.focus()})),void clearTimeout(this.listI);this.dropList.dropDownListShow||(this.dropList.dropDownListShow=!0),this.triangle=!0,this.$nextTick((function(){t.dropList.dropDownShow=!0,t.$nextTick((function(){t.dropList.dropDownShow&&t.dropList.focus()}))}))}}}},(function(){var t=this,e=t._self._c;return e("div",{class:"p-d-button p-d-button-".concat(t.type," p-d-button-").concat(t.size," p-d-button-").concat(t.dropDownType).concat(t.disabled?" p-dd-button-disabled":"")},[e("div",{ref:"buttonText",staticClass:"p-d-button-text",on:{mouseenter:function(e){return t.buttonEnter("left")},click:t.handleClick,mouseleave:t.buttonLeave}},[t.text?[t._v(t._s(t.text))]:[t._t("default")]],2),t._v(" "),"split-drop"===t.dropDownType?e("div",{staticClass:"p-d-button-split-line"}):t._e(),t._v(" "),e("div",{staticClass:"p-d-button-triangle",on:{mouseenter:function(e){return t.buttonEnter("right")},click:t.handleRightClick,mouseleave:t.buttonLeave}},[e("TriangleSvg",{class:[!t.triangle&&"p-d-button-rotate","p-d-button-triangle-svg"]})],1)])}),[],!1,null,null,null).exports;c.install=function(t){return t.component(c.name,c)};var h=c}(),n}()},"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("DropDownButton",["vue"],e):"object"==typeof exports?exports.DropDownButton=e(require("vue")):t.DropDownButton=e(t.Vue);