vxe-table-demonic/lib/tooltip/src/tooltip.min.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_conf=_interopRequireDefault(require("../../v-x-e-table/src/conf")),_size=require("../../hooks/size"),_utils=require("../../tools/utils"),_dom=require("../../tools/dom"),_vn=require("../../tools/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var __assign=function(){return(__assign=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)},__spreadArray=function(e,t,n){if(n||2===arguments.length)for(var i,o=0,r=t.length;o<r;o++)!i&&o in t||((i=i||Array.prototype.slice.call(t,0,o))[o]=t[o]);return e.concat(i||Array.prototype.slice.call(t))},_default=(0,_vue.defineComponent)({name:"VxeTooltip",props:{modelValue:Boolean,size:{type:String,default:function(){return _conf.default.tooltip.size||_conf.default.size}},trigger:{type:String,default:function(){return _conf.default.tooltip.trigger}},theme:{type:String,default:function(){return _conf.default.tooltip.theme}},content:{type:[String,Number],default:null},useHTML:Boolean,zIndex:[String,Number],popupClassName:[String,Function],isArrow:{type:Boolean,default:!0},enterable:Boolean,enterDelay:{type:Number,default:function(){return _conf.default.tooltip.enterDelay}},leaveDelay:{type:Number,default:function(){return _conf.default.tooltip.leaveDelay}}},emits:["update:modelValue"],setup:function(s,e){function n(){var e,t,n,i,o,r,l,u,a,c=_.tipTarget,s=_.tipStore;c&&(e=(n=(0,_dom.getDomNode)()).scrollTop,t=n.scrollLeft,n=n.visibleWidth,i=(o=(0,_dom.getAbsolutePos)(c)).top,o=o.left,r=(l=g.value).offsetHeight,l=l.offsetWidth,a=o,u=i-r-6,t+n<(a=Math.max(6,o+Math.floor((c.offsetWidth-l)/2)))+l+6&&(a=t+n-l-6),i-r<e+6&&(s.placement="bottom",u=i+c.offsetHeight+6),s.style.top="".concat(u,"px"),s.style.left="".concat(a,"px"),s.arrowStyle.left="".concat(o-a+c.offsetWidth/2,"px"))}function i(e){e!==_.visible&&(_.visible=e,_.isUpdate=!0,a("update:modelValue",e))}function r(){_.visible?y.close():y.open()}function l(){y.open()}function u(){var e=s.trigger,t=s.enterable,n=s.leaveDelay;_.tipActive=!1,t&&"hover"===e?setTimeout(function(){_.tipActive||y.close()},n):y.close()}function p(){_.tipActive=!0}function f(){var e=s.trigger,t=s.enterable,n=s.leaveDelay;_.tipActive=!1,t&&"hover"===e&&setTimeout(function(){_.tipActive||y.close()},n)}function o(){var e=_.tipStore,t=g.value;return t&&!t.parentNode&&document.body.appendChild(t),i(!0),_.tipZindex<(0,_utils.getLastZIndex)()&&(_.tipZindex=(0,_utils.nextZIndex)()),e.placement="top",e.style={width:"auto",left:0,top:0,zIndex:s.zIndex||_.tipZindex},e.arrowStyle={left:"50%"},y.updatePlacement()}var v=e.slots,a=e.emit,t=_xeUtils.default.uniqueId(),d=(0,_size.useSize)(s),_=(0,_vue.reactive)({target:null,isUpdate:!1,visible:!1,tipContent:"",tipActive:!1,tipTarget:null,tipZindex:0,tipStore:{style:{},placement:"",arrowStyle:{}}}),g=(0,_vue.ref)(),c={refElem:g},m={xID:t,props:s,context:e,reactData:_,getRefMaps:function(){return c}},y={},x=_xeUtils.default.debounce(function(){_.tipActive&&o()},s.enterDelay,{leading:!1,trailing:!0}),y={dispatchEvent:function(e,t,n){a(e,Object.assign({$tooltip:m,$event:n},t))},open:function(e,t){return y.toVisible(e||_.target,t)},close:function(){return _.tipTarget=null,_.tipActive=!1,Object.assign(_.tipStore,{style:{},placement:"",arrowStyle:null}),i(!1),(0,_vue.nextTick)()},toVisible:function(e,t){if(e){var n=s.trigger,i=s.enterDelay;if(_.tipActive=!0,_.tipTarget=e,t&&(_.tipContent=t),!i||"hover"!==n)return o();x()}return(0,_vue.nextTick)()},updatePlacement:function(){return(0,_vue.nextTick)().then(function(){var e=_.tipTarget,t=g.value;if(e&&t)return n(),(0,_vue.nextTick)().then(n)})},isActived:function(){return _.tipActive},setActived:function(e){_.tipActive=!!e}};Object.assign(m,y),(0,_vue.watch)(function(){return s.content},function(){_.tipContent=s.content}),(0,_vue.watch)(function(){return s.modelValue},function(){_.isUpdate||(s.modelValue?y.open():y.close()),_.isUpdate=!1}),(0,_vue.onMounted)(function(){(0,_vue.nextTick)(function(){var n,e=s.trigger,t=s.content,i=s.modelValue,o=g.value;o&&(n=o.parentNode)&&(_.tipContent=t,_.tipZindex=(0,_utils.nextZIndex)(),_xeUtils.default.arrayEach(o.children,function(e,t){1<t&&(n.insertBefore(e,o),_.target||(_.target=e))}),n.removeChild(o),(t=_.target)&&("hover"===e?(t.onmouseenter=l,t.onmouseleave=u):"click"===e&&(t.onclick=r)),i)&&y.open()})}),(0,_vue.onBeforeUnmount)(function(){var e,t=s.trigger,n=_.target,i=g.value;i&&(e=i.parentNode)&&e.removeChild(i),n&&("hover"===t?(n.onmouseenter=null,n.onmouseleave=null):"click"===t&&(n.onclick=null))});return m.renderVN=function(){var e,t=s.popupClassName,n=s.theme,i=s.isArrow,o=s.enterable,r=_.tipActive,l=_.visible,u=_.tipStore,a=v.default,c=d.value;return o&&(e={onMouseenter:p,onMouseleave:f}),(0,_vue.h)("div",__assign({ref:g,class:["vxe-table--tooltip-wrapper","theme--".concat(n),t?_xeUtils.default.isFunction(t)?t({$tooltip:m}):t:"",((n={})["size--".concat(c)]=c,n["placement--".concat(u.placement)]=u.placement,n["is--enterable"]=o,n["is--visible"]=l,n["is--arrow"]=i,n["is--active"]=r,n)],style:u.style},e),__spreadArray([(t=s.useHTML,c=_.tipContent,(o=v.content)?(0,_vue.h)("div",{key:1,class:"vxe-table--tooltip-content"},(0,_vn.getSlotVNs)(o({}))):t?(0,_vue.h)("div",{key:2,class:"vxe-table--tooltip-content",innerHTML:c}):(0,_vue.h)("div",{key:3,class:"vxe-table--tooltip-content"},(0,_utils.formatText)(c))),(0,_vue.h)("div",{class:"vxe-table--tooltip-arrow",style:u.arrowStyle})],a?(0,_vn.getSlotVNs)(a({})):[],!0))},m},render:function(){return this.renderVN()}});exports.default=_default;