@persagy2/meri-design/dist/Dropdown/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 o(t){var i=n[t];if(void 0!==i)return i.exports;var r=n[t]={exports:{}};return e[t](r,r.exports,o),r.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 i={};return function(){function t(t,e,n,o,i,r,a,s){var p,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),o&&(l.functional=!0),r&&(l._scopeId="data-v-"+r),a?(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__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=p):i&&(p=s?function(){i.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:i),p)if(l.functional){l._injectStyles=p;var u=l.render;l.render=function(t,e){return p.call(e),u(t,e)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,p):[p]}return{exports:t,options:l}}o.r(i),o.d(i,{default:function(){return v}});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),r=o.n(n),a=function(t,e,n,o,i){var r,a,s=e.clientHeight,p=e.clientWidth,l=window,u=l.pageYOffset,d=l.pageXOffset,c=t.getBoundingClientRect(),h=c.top,f=c.left,m=c.height,v=c.width,g=!0;s-(h+m+8)>=n?r=h+m+8+u:h-8>=n?(r=h-n-8+u,g=!1):r=s-n+u;var y=p-f-v,S=y+v;return a=p<=o?d:f>0?S>=o?f+d:f+v>=o?f+v-o+d+(y>0?0:y):(p-o)/2+d:d,i&&S>=o&&(a=a-o+v),{X:a,Y:r,P:g}},s=function(t){if(t&&!t._isDestroyed){t.$destroy();var e=t.$el;e&&e.parentNode.removeChild(e)}},p=t({},(function(){var t=this._self._c;return t("svg",{attrs:{viewBox:"0 0 14 14",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[t("g",{attrs:{transform:"translate(-1.000000, -1.000000)","fill-rule":"nonzero"}},[t("path",{staticClass:"svg-fill-grey-400",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),l=t({name:"DOption",components:{ClearSvg:p.exports},props:{parent:{type:Object,default:function(){return{}}},data:{type:Array,default:function(){return[]},require:!0},value:{type:[String,Number],default:""},minWidth:{type:[String,Number],default:""},maxWidth:{type:[String,Number],default:""},theme:{type:String,default:"light"},trigger:{type:String,default:"hover"},openSearch:{type:Boolean,default:!1},placeholder:{type:String,default:"请搜索"},alignRight:{type:Boolean,default:!1},arrow:{type:Boolean,default:!1},translateX:{type:[String,Number],default:0},maxCount:{type:[String,Number],default:5}},data:function(){return{position:!0,optionStatus:!1,activeClose:!0,inputVal:"",optionData:[],scrollTop:0}},watch:{optionStatus:function(t){var e=this;t?setTimeout((function(){e.$el.style.pointerEvents="auto",e.$el.focus()}),300):this.$el.style.pointerEvents="none"},data:{handler:function(t,e){var n=JSON.stringify(t);n!==JSON.stringify(e)&&(this.optionData=JSON.parse(n))},deep:!0},inputVal:function(t,e){var n=this;t!==e&&(this.timer&&clearTimeout(this.timer),this.timer=setTimeout((function(){n.searchHandle(t)}),300))}},mounted:function(){this.optionData=JSON.parse(JSON.stringify(this.data))},methods:{TextEllipsis:function(t){var e=t.target,n=e.clientWidth,o=e.scrollWidth;e.title=o>n?e.innerText:""},inputDown:function(){this.activeClose=!1},searchHandle:function(t){var e=JSON.parse(JSON.stringify(this.data));this.optionData=t?e.filter((function(e){return e.name.includes(t)?e:null})):e},clearInput:function(){this.inputVal=""},optionClick:function(t,e,n){n||this.$emit("change",t,e)},dropClose:function(){this.activeClose&&(this.optionStatus=!1,this.parent.optionStatus=!1)},dropEnter:function(){this.activeClose=!1,this.parent.dropTimer&&clearTimeout(this.parent.dropTimer),this.dropTimer&&clearTimeout(this.dropTimer)},dropLeave:function(){this.activeClose=!0,this.$el.focus(),"hover"===this.trigger&&(this.dropTimer=setTimeout(this.dropClose,300))},scrollTopHandle:function(t){this.scrollTop=t.target.scrollTop}}},(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"}],class:["p-drop-content","p-drop-content-".concat(t.theme),t.arrow&&(t.position?"p-drop-content-top-arrow":"p-drop-content-bottom-arrow")],style:{minWidth:"".concat(t.minWidth,"px"),maxWidth:"".concat(t.maxWidth,"px")},attrs:{tabindex:"-1"},on:{wheel:function(t){t.stopPropagation()},blur:t.dropClose,mouseenter:t.dropEnter,mouseleave:t.dropLeave}},[t.openSearch?e("label",{staticClass:"p-drop-search",class:{"p-drop-search-shadow":t.scrollTop>12}},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.inputVal,expression:"inputVal"}],staticClass:"p-drop-input",attrs:{type:"text",placeholder:t.placeholder},domProps:{value:t.inputVal},on:{mousedown:t.inputDown,input:function(e){e.target.composing||(t.inputVal=e.target.value)}}}),t._v(" "),e("i",{directives:[{name:"show",rawName:"v-show",value:t.inputVal,expression:"inputVal"}],staticClass:"p-drop-clear",on:{click:t.clearInput}},[e("ClearSvg")],1)]):t._e(),t._v(" "),e("div",{ref:"dropOption",staticClass:"p-drop-option",on:{scroll:t.scrollTopHandle}},t._l(t.optionData,(function(n,o){return e("section",{key:"".concat(o,"-").concat(n.id),class:["p-drop-option-item",t.value===n.id&&"p-drop-option-selected",n.disabled&&"p-drop-option-disable"],on:{click:function(e){return e.stopPropagation(),t.optionClick(n.id,n.name,n.disabled)},mouseenter:t.TextEllipsis}},[n.icon?e("i",{staticClass:"p-drop-option-svg",domProps:{innerHTML:t._s(n.icon)}}):t._e(),t._v(" "),e("span",[t._v(t._s(n.name))])])})),0)])])}),[],!1,null,null,null).exports,u=r().extend(l),d=null,c=function(t){var e=t.tag,n=t.propsData,o=document.body;return(d=(d=new u({propsData:n})).$mount()).tag=e,d.dom=o,o.appendChild(d.$el),d};c.remove=s,c.resetPosition=function(t){var e,n=t.data,o=void 0===n?[]:n,i=t.minWidth,r=t.maxWidth,s=t.alignRight,p=t.translateX,l=t.maxCount,u=void 0===l?5:l,d=t.$refs.dropOption,c=i&&r&&i===r?r:function(t,e,n){var o=document.body,i=document.createElement("div");i.className="p-drop-content",e&&(i.style.minWidth="".concat(e,"px")),n&&(i.style.maxWidth="".concat(n,"px")),i.style.height="0",i.style.zIndex="-100";var r='<div class="p-drop-option">';t.forEach((function(t){r+='<section class="p-drop-option-item"><span>'.concat(t.name,"</span></section>")})),r+="</div>",i.innerHTML=r,o.appendChild(i);var a=i.getBoundingClientRect().width;return o.removeChild(i),a}(o,i,r),h=38*o.length,f=38*u;e=h<f?h:f;var m=a(t.tag,t.dom,e,c,s),v=m.X,g=m.Y,y=m.P;t.position=y,t.$el.style.top="".concat(g,"px"),t.$el.style.left="".concat(v+Number(p),"px"),d.style.maxHeight="".concat(f,"px")};var h=c,f=t({name:"Dropdown",components:{Triangle:e},props:{data:{type:Array,default:function(){return[]},require:!0},value:{type:[String,Number],default:""},minWidth:{type:[String,Number],default:""},maxWidth:{type:[String,Number],default:""},triangle:{type:Boolean,default:!0},transfer:{type:String,default:"parent"},theme:{type:String,default:"light"},trigger:{type:String,default:"hover"},openSearch:{type:Boolean,default:!1},placeholder:{type:String,default:"请搜索"},alignRight:{type:Boolean,default:!1},arrow:{type:Boolean,default:!1},translateX:{type:[String,Number],default:0},disabled:{type:Boolean,default:!1},maxCount:{type:[String,Number],default:5}},data:function(){return{optionStatus:!1,dropShow:!1}},watch:{value:function(t,e){t!==e&&this.dOption&&(this.dOption.value=t)},data:function(t,e){t!==e&&this.dOption&&(this.dOption.data=t)},optionStatus:function(t,e){var n=this;t!==e&&(t?this.dropShow=!0:setTimeout((function(){n.dropShow=!1}),300))},dropShow:function(t,e){t!==e&&this.$emit("getStatus",t)}},methods:{openDrop:function(){var t=this,e=this.data;if(!(JSON.stringify(e).length<=4))if(this.dOption)this.setDropdownStatus(!0);else{var n=this.value,o=this.minWidth,i=this.maxWidth,r=this.trigger,a=this.theme,s=this.openSearch,p=this.placeholder,l=this.alignRight,u=this.arrow,d=this.translateX,c=this.maxCount,f=this.$refs.pDrop;this.dOption=h({tag:f,propsData:{parent:this,value:n,data:e,minWidth:o,maxWidth:i,trigger:r,theme:a,openSearch:s,placeholder:p,alignRight:l,arrow:u,translateX:d,maxCount:c}}).$on("change",(function(e,n){t.optionClick(e,n)})),this.dOption.$nextTick((function(){t.setDropdownStatus(!0)}))}},dropClick:function(){var t=this.disabled,e=this.trigger,n=this.optionStatus,o=this.dropShow;t||o||"click"!==e||n||this.openDrop()},dropEnter:function(){var t=this.disabled,e=this.trigger,n=this.optionStatus;t||"hover"!==e||n||this.openDrop()},dropLeave:function(){this.disabled||"hover"===this.trigger&&this.dOption&&(this.dropTimer=setTimeout(this.dOption.dropClose,300))},setDropdownStatus:function(t){this.optionStatus=t,this.dOption&&(this.dOption.optionStatus=t,t&&h.resetPosition(this.dOption))},optionClick:function(t,e){this.$emit("input",t),this.$emit("change",t,e),this.setDropdownStatus(!1)},listenScroll:function(){this.setDropdownStatus(!1)}},beforeDestroy:function(){this.setDropdownStatus(!1),this.dOption&&h.remove(this.dOption)}},(function(){var t=this,e=t._self._c;return e("div",{ref:"pDrop",class:["p-drop","p-drop-".concat(t.theme),t.dropShow&&"p-drop-show",t.disabled&&"p-drop-disabled"],on:{mouseenter:t.dropEnter,mouseleave:t.dropLeave,click:function(e){return e.stopPropagation(),t.dropClick.apply(null,arguments)}}},[e("section",{staticClass:"p-drop-title"},[e("article",{staticClass:"p-drop-title-content"},[t._t("default")],2),t._v(" "),t.triangle?e("article",{class:["p-drop-triangle",!t.optionStatus&&"p-drop-triangle-rotate"]},[e("Triangle")],1):t._e()])])}),[],!1,null,null,null),m=f.exports;m.install=function(t){return t.component(m.name,m)};var v=m}(),i}()},"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("Dropdown",["vue"],e):"object"==typeof exports?exports.Dropdown=e(require("vue")):t.Dropdown=e(t.Vue);