tt-mp/lib/popover/index.js

一套组件化、可复用、易扩展的头条小程序 UI 组件库

"use strict";var _baseComponent=_interopRequireDefault(require("../helpers/baseComponent")),_classNames2=_interopRequireDefault(require("../helpers/classNames")),_styleToCssString=_interopRequireDefault(require("../helpers/styleToCssString")),_index=require("../index");function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function _slicedToArray(t,e){return _arrayWithHoles(t)||_iterableToArrayLimit(t,e)||_unsupportedIterableToArray(t,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,e){if(t){if("string"==typeof t)return _arrayLikeToArray(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,e):void 0}}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,o=new Array(e);r<e;r++)o[r]=t[r];return o}function _iterableToArrayLimit(t,e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t)){var r=[],o=!0,l=!1,n=void 0;try{for(var i,a=t[Symbol.iterator]();!(o=(i=a.next()).done)&&(r.push(i.value),!e||r.length!==e);o=!0);}catch(t){l=!0,n=t}finally{try{o||null==a.return||a.return()}finally{if(l)throw n}}return r}}function _arrayWithHoles(t){if(Array.isArray(t))return t}var getPlacements=function(t,e){var r=_slicedToArray(0<arguments.length&&void 0!==t?t:rects,3),o=r[0],l=r[1],n=r[2];switch(1<arguments.length&&void 0!==e?e:"top"){case"topLeft":return{top:l.scrollTop+o.top-n.height-4,left:l.scrollLeft+o.left};case"top":return{top:l.scrollTop+o.top-n.height-4,left:l.scrollLeft+o.left+(o.width-n.width)/2};case"topRight":return{top:l.scrollTop+o.top-n.height-4,left:l.scrollLeft+o.left+o.width-n.width};case"rightTop":return{top:l.scrollTop+o.top,left:l.scrollLeft+o.left+o.width+4};case"right":return{top:l.scrollTop+o.top+(o.height-n.height)/2,left:l.scrollLeft+o.left+o.width+4};case"rightBottom":return{top:l.scrollTop+o.top+o.height-n.height,left:l.scrollLeft+o.left+o.width+4};case"bottomRight":return{top:l.scrollTop+o.top+o.height+4,left:l.scrollLeft+o.left+o.width-n.width};case"bottom":return{top:l.scrollTop+o.top+o.height+4,left:l.scrollLeft+o.left+(o.width-n.width)/2};case"bottomLeft":return{top:l.scrollTop+o.top+o.height+4,left:l.scrollLeft+o.left};case"leftBottom":return{top:l.scrollTop+o.top+o.height-n.height,left:l.scrollLeft+o.left-n.width-4};case"left":return{top:l.scrollTop+o.top+(o.height-n.height)/2,left:l.scrollLeft+o.left-n.width-4};case"leftTop":return{top:l.scrollTop+o.top,left:l.scrollLeft+o.left-n.width-4};default:return{left:0,top:0}}};(0,_baseComponent.default)({properties:{prefixCls:{type:String,value:"wux-popover"},classNames:{type:null,value:"wux-animate--fadeIn"},theme:{type:String,value:"light"},title:{type:String,value:""},content:{type:String,value:""},placement:{type:String,value:"top"},trigger:{type:String,value:"click"},bodyStyle:{type:[String,Object],value:"",observer:function(t){this.setData({extStyle:(0,_styleToCssString.default)(t)})}},defaultVisible:{type:Boolean,value:!1},visible:{type:Boolean,value:!1,observer:function(t){this.data.controlled&&this.updated(t)}},controlled:{type:Boolean,value:!1},mask:{type:Boolean,value:!1},maskClosable:{type:Boolean,value:!0}},data:{extStyle:"",popoverStyle:"",popoverVisible:!1},computed:{classes:["prefixCls, theme, placement",function(t,e,r){var o;return{wrap:(0,_classNames2.default)(t,(_defineProperty(o={},"".concat(t,"--theme-").concat(e),e),_defineProperty(o,"".concat(t,"--placement-").concat(r),r),o)),content:"".concat(t,"__content"),arrow:"".concat(t,"__arrow"),inner:"".concat(t,"__inner"),title:"".concat(t,"__title"),innerContent:"".concat(t,"__inner-content"),element:"".concat(t,"__element")}}]},methods:{updated:function(t){this.data.popoverVisible!==t&&(this.setData({popoverVisible:t}),this.setBackdropVisible(t))},getPopoverStyle:function(){var o=this,t=this.data,e=t.prefixCls,l=t.placement,r=tt.createSelectorQuery().in(this);r.select(".".concat(e,"__element")).boundingClientRect(),r.selectViewport().scrollOffset(),r.select(".".concat(e)).boundingClientRect(),r.exec(function(t){var e,r;t.filter(function(t){return!t}).length||(e=getPlacements(t,l),r=(0,_styleToCssString.default)(e),o.setData({popoverStyle:r}))})},onEnter:function(){this.getPopoverStyle()},onChange:function(){var t=this.data,e=!t.popoverVisible;t.controlled||this.updated(e),this.triggerEvent("change",{visible:e})},onClick:function(){"click"===this.data.trigger&&this.onChange()},setBackdropVisible:function(t){this.data.mask&&this.$wuxBackdrop&&this.$wuxBackdrop[t?"retain":"release"]()},onMaskClick:function(){var t=this.data,e=t.maskClosable,r=t.popoverVisible;e&&r&&this.onChange()}},ready:function(){var e=this,t=this.data,r=t.defaultVisible,o=t.visible,l=t.controlled?o:r;this.data.mask&&(0,_index.$wuxBackdrop)("#wux-backdrop",this).then(function(t){e.$wuxBackdrop=t}),this.updated(l)}});