@persagy2/meri-design/dist/DropGroupFrame/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:31:52
 */
var t,e;t=this,e=function(t){return function(){"use strict";var e={2205:function(e){e.exports=t}},n={};function i(t){var r=n[t];if(void 0!==r)return r.exports;var o=n[t]={exports:{}};return e[t](o,o.exports,i),o.exports}i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,{a:e}),e},i.d=function(t,e){for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.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,i,r,o,s,a){var l,p="function"==typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),i&&(p.functional=!0),o&&(p._scopeId="data-v-"+o),s?(l=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)},p._ssrRegister=l):r&&(l=a?function(){r.call(this,(p.functional?this.parent:this).$root.$options.shadowRoot)}:r),l)if(p.functional){p._injectStyles=l;var c=p.render;p.render=function(t,e){return l.call(e),c(t,e)}}else{var d=p.beforeCreate;p.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:p}}i.r(r),i.d(r,{default:function(){return x}});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=i(2205),o=i.n(n),s=function(t,e,n,i,r){var o,s,a=e.clientHeight,l=e.clientWidth,p=window,c=p.pageYOffset,d=p.pageXOffset,u=t.getBoundingClientRect(),h=u.top,f=u.left,m=u.height,v=u.width,g=!0;a-(h+m+8)>=n?o=h+m+8+c:h-8>=n?(o=h-n-8+c,g=!1):o=a-n+c;var x=l-f-v,C=x+v;return s=l<=i?d:f>0?C>=i?f+d:f+v>=i?f+v-i+d+(x>0?0:x):(l-i)/2+d:d,r&&C>=i&&(s=s-i+v),{X:s,Y:o,P:g}},a=function(t){if(t&&!t._isDestroyed){t.$destroy();var e=t.$el;e&&e.parentNode.removeChild(e)}},l=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:"M7.33333333,1.66666667 C10.4629469,1.66666667 13,4.20371975 13,7.33333333 C13,8.5161451 12.6376073,9.61431552 12.0177959,10.5228708 L14.5141262,13.0197685 L13.4770362,14.0568585 L11.039635,11.6199956 C10.046045,12.4798234 8.75043606,13 7.33333333,13 C4.20371975,13 1.66666667,10.4629469 1.66666667,7.33333333 C1.66666667,4.20371975 4.20371975,1.66666667 7.33333333,1.66666667 Z M7.33333333,3.06666667 C4.9769184,3.06666667 3.06666667,4.9769184 3.06666667,7.33333333 C3.06666667,9.68974827 4.9769184,11.6 7.33333333,11.6 C9.68974827,11.6 11.6,9.68974827 11.6,7.33333333 C11.6,4.9769184 9.68974827,3.06666667 7.33333333,3.06666667 Z"}})])}),[],!1,null,null,null).exports,p=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("g",{attrs:{stroke:"none","stroke-width":"1","fill-rule":"evenodd"}},[t("path",{staticClass:"svg-fill-grey-500",attrs:{d:"M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M10.784375,9.6375 C11.040625,9.89375 11.040625,10.309375 10.784375,10.565625 C10.528125,10.821875 10.1125,10.821875 9.85625,10.565625 L8,8.709375 L6.14375,10.565625 C5.8875,10.821875 5.471875,10.821875 5.215625,10.565625 C4.959375,10.309375 4.959375,9.89375 5.215625,9.6375 L7.071875,7.78125 L5.215625,5.925 C4.959375,5.66875 4.959375,5.253125 5.215625,4.996875 C5.471875,4.740625 5.8875,4.740625 6.14375,4.996875 L8,6.853125 L9.85625,4.996875 C10.1125,4.740625 10.528125,4.740625 10.784375,4.996875 C11.040625,5.253125 11.040625,5.66875 10.784375,5.925 L8.928125,7.78125 L10.784375,9.6375 L10.784375,9.6375 Z"}})])])}),[],!1,null,null,null).exports,c=function(t,e,n){var i=t.split(""),r=e.split("");return i.map((function(t){return r.includes(t)?'<span class="'.concat(n,'">').concat(t,"</span>"):t})).join("")},d=t({name:"DFrameOption",components:{SearchSvg:l,DeleteIcon:p},props:{parent:{type:Object,default:function(){return{}}},data:{type:Array,default:function(){return[]},require:!0},selectedId:{type:[String,Number],default:""},theme:{type:String,default:"light"},divider:{type:Boolean,default:!1},search:{type:Boolean,default:!1},placeholder:{type:String,default:"搜索"}},data:function(){return{position:!0,optionStatus:!1,activeClose:!0,inputText:"",searchData:[]}},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"},inputText:function(t,e){var n=this;t!==e&&(this.timer&&clearTimeout(this.timer),this.timer=setTimeout((function(){n.searchHandle(t)}),300))}},methods:{optionClick:function(t,e,n){n||this.$emit("change",{id:t,name:e})},optionTitleClick:function(t,e){this.divider||this.$emit("change",{id:t,name:e})},optionEnter:function(t){var e=t.target,n=e.clientWidth,i=e.scrollWidth;!e.title&&i>n&&(e.title=e.innerText)},dropOptionBlur:function(){this.activeClose&&(this.optionStatus=!1,this.parent.optionStatus=!1)},mouseenterHandle:function(){this.activeClose=!1,this.parent.timer&&clearTimeout(this.parent.timer),this.timer&&clearTimeout(this.timer)},mouseleaveHandle:function(){this.activeClose=!0,this.$refs.groupOption.focus(),"hover"===this.trigger&&(this.timer=setTimeout(this.dropOptionBlur,300))},searchHandle:function(t){this.searchData=t?JSON.parse(JSON.stringify(this.data)).map((function(e){var n=e.children;return n&&n.length&&(e.children=n.filter((function(e){return!e.disabled&&(n=e.name,i=t,r=n.split(""),o=i.split(""),r.filter((function(t){return o.includes(t)})).join(""))?(e.name=c(e.name,t,"p-drop-frame-option-text-highlight"),e):null;var n,i,r,o}))),e})):[]},clearInput:function(){this.inputText=""}},beforeDestroy:function(){this.timer&&clearTimeout(this.timer)}},(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-frame-box",t.divider&&"p-drop-frame-box-divider","p-drop-frame-box-".concat(t.theme)],attrs:{tabindex:"-1"},on:{blur:t.dropOptionBlur,mouseenter:t.mouseenterHandle,mouseleave:t.mouseleaveHandle,wheel:function(t){t.stopPropagation()}}},[t.search?e("div",{staticClass:"p-drop-frame-search"},[e("i",{staticClass:"p-drop-frame-svg p-drop-frame-search-svg"},[e("SearchSvg")],1),t._v(" "),e("input",{directives:[{name:"model",rawName:"v-model",value:t.inputText,expression:"inputText"}],attrs:{type:"text",placeholder:t.placeholder},domProps:{value:t.inputText},on:{input:function(e){e.target.composing||(t.inputText=e.target.value)}}}),t._v(" "),e("i",{directives:[{name:"show",rawName:"v-show",value:t.inputText,expression:"inputText"}],staticClass:"p-drop-frame-svg p-drop-frame-close-svg",on:{click:t.clearInput}},[e("DeleteIcon")],1)]):t._e(),t._v(" "),t.search&&t.searchData.length?t._l(t.searchData,(function(n){return e("div",{key:n.id},[e("section",{staticClass:"p-drop-frame-item-title",class:[!t.divider&&"p-drop-frame-item-title-can",!t.divider&&t.selectedId===n.id&&"p-drop-frame-item-title-selected"],on:{click:function(e){return t.optionTitleClick(n.id,n.name)}}},[t._v(t._s(n.name))]),t._v(" "),t._l(n.children,(function(n){return e("article",{key:n.id,class:["p-drop-frame-option",t.selectedId===n.id&&"p-drop-frame-option-selected",n.disabled&&"p-drop-frame-option-disable"],domProps:{innerHTML:t._s(n.name)},on:{click:function(e){return t.optionClick(n.id,n.name,n.disabled)},mouseenter:t.optionEnter}})}))],2)})):t._l(t.data,(function(n){return e("div",{key:n.id},[e("section",{staticClass:"p-drop-frame-item-title",class:[!t.divider&&"p-drop-frame-item-title-can",!t.divider&&t.selectedId===n.id&&"p-drop-frame-item-title-selected"],on:{click:function(e){return t.optionTitleClick(n.id,n.name)}}},[t._v(t._s(n.name))]),t._v(" "),t._l(n.children,(function(n){return e("article",{key:n.id,class:["p-drop-frame-option",t.selectedId===n.id&&"p-drop-frame-option-selected",n.disabled&&"p-drop-frame-option-disable"],on:{click:function(e){return t.optionClick(n.id,n.name,n.disabled)},mouseenter:t.optionEnter}},[t._v(t._s(n.name))])}))],2)}))],2)])}),[],!1,null,null,null).exports,u=o().extend(d),h=null,f=function(t){var e=t.tag,n=t.propsData,i=document.body;return(h=(h=new u({propsData:n})).$mount()).tag=e,h.dom=i,i.appendChild(h.$el),h};f.remove=a,f.resetPosition=function(t){var e=t.data||[],n=f.getWidth(e),i=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=i.X,o=i.Y,a=i.P;t.position=a,t.$el.style.top="".concat(o,"px"),t.$el.style.left="".concat(r,"px")},f.getWidth=function(t){var e=document.body,n=document.createElement("div");n.className="p-drop-frame-box",n.style.padding="0",n.style.border="0",n.style.height="0",n.style.zIndex="-100";var i="";t.forEach((function(t){i+="".concat('<div><section class="p-drop-frame-item-title">').concat(t.name,"</section>"),t.children&&t.children.length&&t.children.forEach((function(t){i+='<article class="p-drop-frame-option">'.concat(t.name,"</article>")})),i+="</div>"})),n.innerHTML=i,e.appendChild(n);var r=n.getBoundingClientRect().width;return e.removeChild(n),r};var m=f,v={name:"DropGroupFrame",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"},divider:{type:Boolean,default:!1},search:{type:Boolean,default:!1},placeholder:{type:String,default:"搜索"}},data:function(){return{optionStatus:!1,dropShow:!1,selectedId:"",selectedText:""}},watch:{value:{handler:function(t,e){t!==e&&t&&(this.selectedId=t,this.gOption&&(this.gOption.selectedId=t),this.setInit(this.data,t))},immediate:!0},data:{handler:function(t){this.gOption&&(this.dOption.data=t),this.setInit(t,this.value)},deep:!0,immediate:!0},optionStatus:function(t,e){var n=this;t!==e&&(t?this.dropShow=!0:setTimeout((function(){n.dropShow=!1}),300))}},methods:{setInit:function(t,e){var n=this;if(t&&t.length)if(e)t.forEach((function(t){var i=t.children;t.id===e?n.selectedText=t.name:i&&i.length&&i.forEach((function(t){t.id===e&&(n.selectedText=t.name)}))}));else{var i=null==t?void 0:t[0],r=i.id,o=i.name;r===e?(this.selectedId=r,this.selectedText=o,this.$emit("change",{id:r,name:o})):(this.selectedId="",this.selectedText="")}},openDrop:function(){var t=this;if(this.gOption)this.setDropdownStatus(!0);else{var e=this.selectedId,n=this.data,i=this.theme,r=this.trigger,o=this.divider,s=this.search,a=this.placeholder;this.gOption=m({tag:this.$refs.groupFrame,propsData:{parent:this,selectedId:e,data:n,theme:i,trigger:r,divider:o,search:s,placeholder:a}}).$on("change",(function(e){var n=e.id,i=e.name;t.selectedId=n,t.selectedText=i,t.optionClick(e),t.gOption.selectedId=n})),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&&m.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&&m.remove(this.gOption)}},g=t(v,(function(){var t=this,e=t._self._c;return e("div",{ref:"groupFrame",class:["p-drop-frame","p-drop-frame-".concat(t.theme),t.dropShow&&"p-drop-frame-show"],on:{mouseenter:t.groupEnter,mouseleave:t.groupLeave,click:t.groupClick}},[e("section",{staticClass:"p-drop-frame-title"},[e("article",{staticClass:"p-drop-frame-title-content"},[t._v(t._s(t.selectedText))]),t._v(" "),e("article",{class:["p-drop-frame-triangle",!t.optionStatus&&"p-drop-frame-triangle-rotate"]},[e("Triangle")],1)])])}),[],!1,null,null,null).exports;g.install=function(t){return t.component(g.name,g)};var x=g}(),r}()},"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("DropGroupFrame",["vue"],e):"object"==typeof exports?exports.DropGroupFrame=e(require("vue")):t.DropGroupFrame=e(t.Vue);