jiku-ui/lib/popover.js

A Component Library for Vue.js.

module.exports=function(e){var t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=92)}({0:function(e,t,o){"use strict";function n(e,t,o,n,i,r,s,c){var a,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=o,u._compiled=!0),n&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(a=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=a):i&&(a=c?function(){i.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:i),a)if(u.functional){u._injectStyles=a;var l=u.render;u.render=function(e,t){return a.call(t),l(e,t)}}else{var h=u.beforeCreate;u.beforeCreate=h?[].concat(h,a):[a]}return{exports:e,options:u}}o.d(t,"a",(function(){return n}))},2:function(e,t){e.exports=require("jiku-ui/lib/utils/dom")},3:function(e,t){e.exports=require("jiku-ui/lib/utils/util")},5:function(e,t){e.exports=require("jiku-ui/lib/utils/vue-popper")},7:function(e,t){e.exports=require("vue")},92:function(e,t,o){"use strict";o.r(t);var n=function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("span",[o("transition",{attrs:{name:e.transition},on:{"after-enter":e.handleAfterEnter,"after-leave":e.handleAfterLeave}},[o("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"hn-popover hn-popper",class:[e.popperClass,e.content&&"hn-popover--plain"],style:{width:e.width+"px"},attrs:{role:"tooltip",id:e.tooltipId,"aria-hidden":e.disabled||!e.showPopper?"true":"false"}},[e.title?o("div",{staticClass:"hn-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)};n._withStripped=!0;var i=o(5),r=o.n(i),s=o(2),c=o(3),a={name:"HnPopover",mixins:[r.a],props:{trigger:{type:String,default:"click",validator:function(e){return["click","focus","hover","manual"].indexOf(e)>-1}},openDelay:{type:Number,default:0},closeDelay:{type:Number,default:200},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},arrowOffset:{type:Number,default:0},transition:{type:String,default:"fade-in-linear"},tabindex:{type:Number,default:0}},computed:{tooltipId:function(){return"hn-popover-"+Object(c.generateId)()}},watch:{showPopper:function(e){this.disabled||(e?this.$emit("show"):this.$emit("hide"))}},mounted:function(){var e=this,t=this.referenceElm=this.reference||this.$refs.reference,o=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),t&&(Object(s.addClass)(t,"hn-popover__reference"),t.setAttribute("aria-describedby",this.tooltipId),t.setAttribute("tabindex",this.tabindex),o.setAttribute("tabindex",0),"click"!==this.trigger&&(Object(s.on)(t,"focusin",(function(){e.handleFocus();var o=t.__vue__;o&&"function"==typeof o.focus&&o.focus()})),Object(s.on)(o,"focusin",this.handleFocus),Object(s.on)(t,"focusout",this.handleBlur),Object(s.on)(o,"focusout",this.handleBlur)),Object(s.on)(t,"keydown",this.handleKeydown),Object(s.on)(t,"click",this.handleClick)),"click"===this.trigger?(Object(s.on)(t,"click",this.doToggle),Object(s.on)(document,"click",this.handleDocumentClick)):"hover"===this.trigger?(Object(s.on)(t,"mouseenter",this.handleMouseEnter),Object(s.on)(o,"mouseenter",this.handleMouseEnter),Object(s.on)(t,"mouseleave",this.handleMouseLeave),Object(s.on)(o,"mouseleave",this.handleMouseLeave)):"focus"===this.trigger&&(this.tabindex<0&&console.warn("[Heiner Warn][Popover]a negative taindex means that the element cannot be focused by tab key"),t.querySelector("input, textarea")?(Object(s.on)(t,"focusin",this.doShow),Object(s.on)(t,"focusout",this.doClose)):(Object(s.on)(t,"mousedown",this.doShow),Object(s.on)(t,"mouseup",this.doClose)))},beforeDestroy:function(){this.cleanup()},deactivated:function(){this.cleanup()},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleFocus:function(){Object(s.addClass)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!0)},handleClick:function(){Object(s.removeClass)(this.referenceElm,"focusing")},handleBlur:function(){Object(s.removeClass)(this.referenceElm,"focusing"),"click"!==this.trigger&&"focus"!==this.trigger||(this.showPopper=!1)},handleMouseEnter:function(){var e=this;clearTimeout(this._timer),this.openDelay?this._timer=setTimeout((function(){e.showPopper=!0}),this.openDelay):this.showPopper=!0},handleKeydown:function(e){27===e.keyCode&&"manual"!==this.trigger&&this.doClose()},handleMouseLeave:function(){var e=this;clearTimeout(this._timer),this.closeDelay?this._timer=setTimeout((function(){e.showPopper=!1}),this.closeDelay):this.showPopper=!1},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,o=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&o&&!o.contains(e.target)&&(this.showPopper=!1)},handleAfterEnter:function(){this.$emit("after-enter")},handleAfterLeave:function(){this.$emit("after-leave"),this.doDestroy()},cleanup:function(){(this.openDelay||this.closeDelay)&&clearTimeout(this._timer)}},destroyed:function(){var e=this.reference;Object(s.off)(e,"click",this.doToggle),Object(s.off)(e,"mouseup",this.doClose),Object(s.off)(e,"mousedown",this.doShow),Object(s.off)(e,"focusin",this.doShow),Object(s.off)(e,"focusout",this.doClose),Object(s.off)(e,"mousedown",this.doShow),Object(s.off)(e,"mouseup",this.doClose),Object(s.off)(e,"mouseleave",this.handleMouseLeave),Object(s.off)(e,"mouseenter",this.handleMouseEnter),Object(s.off)(document,"click",this.handleDocumentClick)}},u=o(0),l=Object(u.a)(a,n,[],!1,null,null,null);l.options.__file="packages/popover/src/main.vue";var h=l.exports,f=function(e,t,o){var n=t.expression?t.value:t.arg,i=o.context.$refs[n];i&&(Array.isArray(i)?i[0].$refs.reference=e:i.$refs.reference=e)},d={bind:function(e,t,o){f(e,t,o)},inserted:function(e,t,o){f(e,t,o)}},p=o(7);o.n(p).a.directive("popover",d),h.install=function(e){e.directive("popover",d),e.component(h.name,h)},h.directive=d;t.default=h}}).default;