@persagy2/meri-design/dark/DropGroup/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}},n={};function o(t){var r=n[t];if(void 0!==r)return r.exports;var i=n[t]={exports:{}};return e[t](i,i.exports,o),i.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 n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},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 r={};return function(){function t(t,e,n,o,r,i,s,a){var p,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),o&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),s?(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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},u._ssrRegister=p):r&&(p=a?function(){r.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:r),p)if(u.functional){u._injectStyles=p;var l=u.render;u.render=function(t,e){return p.call(e),l(t,e)}}else{var c=u.beforeCreate;u.beforeCreate=c?[].concat(c,p):[p]}return{exports:t,options:u}}o.r(r),o.d(r,{default:function(){return f}});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,n=o(2205),i=o.n(n),s=function(t,e,n,o,r){var i,s,a=e.clientHeight,p=e.clientWidth,u=window,l=u.pageYOffset,c=u.pageXOffset,d=t.getBoundingClientRect(),h=d.top,f=d.left,g=d.height,v=d.width,m=!0;a-(h+g+8)>=n?i=h+g+8+l:h-8>=n?(i=h-n-8+l,m=!1):i=a-n+l;var y=p-f-v,S=y+v;return s=p<=o?c:f>0?S>=o?f+c:f+v>=o?f+v-o+c+(y>0?0:y):(p-o)/2+c:c,r&&S>=o&&(s=s-o+v),{X:s,Y:i,P:m}},a=function(t){if(t&&!t._isDestroyed){t.$destroy();var e=t.$el;e&&e.parentNode.removeChild(e)}},p=t({name:"DOption",props:{parent:{type:Object,default:function(){return{}}},data:{type:Array,default:function(){return[]},require:!0},value:{type:[String,Number],default:""},theme:{type:String,default:"light"}},data:function(){return{position:!0,optionStatus:!1}},watch:{optionStatus:function(t){var e=this;t?this.$nextTick((function(){e.$refs.groupOption.focus(),setTimeout((function(){e.$refs.groupOption.style.pointerEvents="auto"}),300)})):this.$refs.groupOption.style.pointerEvents="none"}},methods:{optionClick:function(t,e,n,o){o||this.$emit("change",{cId:e,cName:n,pId:t})},optionEnter:function(t){var e=t.target,n=e.clientWidth,o=e.scrollWidth;!e.title&&o>n&&(e.title=e.innerText)},dropOptionBlur:function(){this.optionStatus=!1,this.parent.optionStatus=!1},mouseenterHandle:function(){this.parent.timer&&clearTimeout(this.parent.timer),this.timer&&clearTimeout(this.timer)},mouseleaveHandle:function(){"hover"===this.trigger&&(this.timer=setTimeout(this.dropOptionBlur,300))}}},(function(){var t=this,e=t._self._c;return e("transition",{attrs:{name:t.position?"selectDownUpExtend":"selectDownUpExtendTop"}},[e("div",{directives:[{name:"show",rawName:"v-show",value:t.optionStatus,expression:"optionStatus"}],ref:"groupOption",class:["p-drop-group-box","p-drop-group-box-".concat(t.theme)],attrs:{tabindex:"-1"},on:{blur:t.dropOptionBlur,mouseenter:t.mouseenterHandle,mouseleave:t.mouseleaveHandle,wheel:function(t){t.stopPropagation()}}},t._l(t.data,(function(n){return e("div",{key:n.id},[e("section",{staticClass:"p-drop-item-title"},[t._v(t._s(n.name))]),t._v(" "),t._l(n.children,(function(o){return e("article",{key:o.id,class:["p-drop-group-option",t.value===o.id&&"p-drop-group-option-selected",o.disabled&&"p-drop-group-option-disable"],on:{click:function(e){return t.optionClick(n.id,o.id,o.name,o.disabled)},mouseenter:t.optionEnter}},[t._v(t._s(o.name))])}))],2)})),0)])}),[],!1,null,null,null).exports,u=i().extend(p),l=null,c=function(t){var e=t.tag,n=t.propsData,o=document.body;return(l=(l=new u({propsData:n})).$mount()).tag=e,l.dom=o,o.appendChild(l.$el),l};c.remove=a,c.resetPosition=function(t){var e=t.data||[],n=c.getWidth(e),o=s(t.tag,t.dom,function(t){var e=[];t.forEach((function(t){e.push(t),t&&t.children&&t.children.length&&t.children.forEach((function(t){e.push(t)}))}));var n=38*e.length+16;return n>246?246:n}(e),n),r=o.X,i=o.Y,a=o.P;t.position=a,t.$el.style.top="".concat(i,"px"),t.$el.style.left="".concat(r,"px")},c.getWidth=function(t){var e=document.body,n=document.createElement("div");n.className="p-drop-group-box",n.style.padding="0",n.style.border="0",n.style.height="0",n.style.zIndex="-100";var o="";t.forEach((function(t){o+="".concat('<div><section class="p-drop-item-title">').concat(t.name,"</section>"),t.children&&t.children.length&&t.children.forEach((function(t){o+='<article class="p-drop-group-option">'.concat(t.name,"</article>")})),o+="</div>"})),n.innerHTML=o,e.appendChild(n);var r=n.getBoundingClientRect().width;return e.removeChild(n),r};var d=c,h=t({name:"DropGroup",components:{Triangle:e},props:{data:{type:Array,default:function(){return[]},require:!0},value:{type:[String,Number],default:""},transfer:{type:String,default:"parent"},theme:{type:String,default:"light"},trigger:{type:String,default:"hover"}},data:function(){return{optionStatus:!1,dropShow:!1}},watch:{value:function(t,e){t!==e&&this.gOption&&(this.gOption.value=t)},data:function(t,e){t!==e&&this.gOption&&(this.dOption.data=t)},optionStatus:function(t,e){var n=this;t!==e&&(t?this.dropShow=!0:setTimeout((function(){n.dropShow=!1}),300))}},methods:{openDrop:function(){var t=this;if(this.gOption)this.setDropdownStatus(!0);else{var e=this.value,n=this.data,o=this.theme,r=this.trigger;this.gOption=d({tag:this.$refs.pDropGroup,propsData:{parent:this,value:e,data:n,theme:o,trigger:r}}).$on("change",(function(e){t.optionClick(e)})),this.gOption.$nextTick((function(){t.setDropdownStatus(!0)}))}},groupEnter:function(){var t=this.trigger,e=this.optionStatus;"hover"!==t||e||this.openDrop()},groupClick:function(){var t=this.trigger,e=this.optionStatus;this.dropShow||"click"!==t||e||this.openDrop()},setDropdownStatus:function(t){this.optionStatus=t,this.gOption&&(t&&d.resetPosition(this.gOption),this.gOption.optionStatus=t)},optionClick:function(t){this.$emit("change",t),this.setDropdownStatus(!1)},groupLeave:function(){"hover"===this.trigger&&this.gOption&&(this.timer=setTimeout(this.gOption.dropOptionBlur,300))},listenScroll:function(){this.setDropdownStatus(!1)}},beforeDestroy:function(){this.setDropdownStatus(!1),this.gOption&&d.remove(this.gOption)}},(function(){var t=this,e=t._self._c;return e("div",{ref:"pDropGroup",class:["p-drop-group","p-drop-group-".concat(t.theme),t.dropShow&&"p-drop-group-show"],on:{mouseenter:t.groupEnter,mouseleave:t.groupLeave,click:t.groupClick}},[e("section",{staticClass:"p-drop-group-title"},[e("article",{staticClass:"p-drop-group-title-content"},[t._t("default")],2),t._v(" "),e("article",{class:["p-drop-group-triangle",!t.optionStatus&&"p-drop-group-triangle-rotate"]},[e("Triangle")],1)])])}),[],!1,null,null,null).exports;h.install=function(t){return t.component(h.name,h)};var f=h}(),r}()},"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("DropGroup",["vue"],e):"object"==typeof exports?exports.DropGroup=e(require("vue")):t.DropGroup=e(t.Vue);