@ophiuchus/popup
Version:
8 lines (7 loc) • 8.07 kB
JavaScript
var t=Object.defineProperty,e=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,s=(e,o,n)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n;
/*!
* @ophiuchus/popup v1.0.1 Sun Sep 26 2021 14:37:15 GMT+0800 (中国标准时间)
* (c) 2021 @mws_ophiuchus
* Released under the MIT License.
*/
import i from"vue";import r from"@ophiuchus/overlay";import a from"@ophiuchus/icon";function c(t,e){return e?"string"==typeof e?` ${t}--${e}`:Array.isArray(e)?e.reduce(((e,o)=>e+c(t,o)),""):Object.keys(e).reduce(((o,n)=>o+(e[n]?c(t,n):"")),""):""}function l(t){return function(e,o){return e&&"string"!=typeof e&&(o=e,e=""),`${e=e?`${t}__${e}`:t}${c(e,o)}`}}const h=/-(\w)/g;const u={methods:{slots(t="default",e){const{$slots:o,$scopedSlots:n}=this,s=n[t];return s?s(e):o[t]}}};function d(t){const{name:e}=this;t.component(e,this),t.component(`-${e}`.replace(h,((t,e)=>e.toUpperCase())),this)}function p(t){return{functional:!0,props:t.props,model:t.model,render:(e,o)=>t(e,o.props,function(t){const e=t.scopedSlots||t.data.scopedSlots||{},o=t.slots();return Object.keys(o).forEach((t=>{e[t]||(e[t]=()=>o[t])})),e}(o),o)}}function f(t){return function(e){return"function"==typeof e&&(e=p(e)),e.functional||(e.mixins=e.mixins||[],e.mixins.push(u)),e.name=t,e.install=d,e}}const v=i.prototype.$isServer;const m={zIndex:2e3,lockCount:0,stack:[],find(t){return this.stack.filter((e=>e.vm===t))[0]}};function y(t,r){const a=new i({el:document.createElement("div"),props:t.props,render(i){return i(t,((t,i)=>{for(var r in i||(i={}))o.call(i,r)&&s(t,r,i[r]);if(e)for(var r of e(i))n.call(i,r)&&s(t,r,i[r]);return t})({props:this.$props},r))}});return document.body.appendChild(a.$el),a}function b(t){const e=t.parentNode;e&&e.removeChild(t)}const k={className:"",customStyle:{}};function C(t){const e=m.find(t);if(e){const o=t.$el,{config:n,overlay:s}=e;o&&o.parentNode&&o.parentNode.insertBefore(s.$el,o),Object.assign(s,k,n,{show:!0})}}function $(t,e){const o=m.find(t);if(o)o.config=e;else{const o=function(t){return y(r,{on:{click(){t.$emit("click-overlay"),t.closeOnClickOverlay&&(t.onClickOverlay?t.onClickOverlay():t.close())}}})}(t);m.stack.push({vm:t,config:e,overlay:o})}C(t)}function g(t){const e=m.find(t);e&&(e.overlay.show=!1)}let S=!1;if(!v)try{const t={};Object.defineProperty(t,"passive",{get(){S=!0}}),window.addEventListener("test-passive",null,t)}catch(N){}function O(t,e,o,n=!1){v||t.addEventListener(e,o,!!S&&{capture:!1,passive:n})}function w(t,e,o){v||t.removeEventListener(e,o)}const I=/scroll|auto/i;const x={data:()=>({direction:""}),methods:{touchStart(t){this.resetTouchStatus(),this.startX=t.touches[0].clientX,this.startY=t.touches[0].clientY},touchMove(t){const e=t.touches[0];var o,n;this.deltaX=e.clientX<0?0:e.clientX-this.startX,this.deltaY=e.clientY-this.startY,this.offsetX=Math.abs(this.deltaX),this.offsetY=Math.abs(this.deltaY),this.direction=this.direction||(o=this.offsetX,n=this.offsetY,o>n&&o>10?"horizontal":n>o&&n>10?"vertical":"")},resetTouchStatus(){this.direction="",this.deltaX=0,this.deltaY=0,this.offsetX=0,this.offsetY=0},bindTouchEvent(t){const{onTouchStart:e,onTouchMove:o,onTouchEnd:n}=this;O(t,"touchstart",e),O(t,"touchmove",o),n&&(O(t,"touchend",n),O(t,"touchcancel",n))}}};function P({ref:t,afterPortal:e}={}){return{props:{getContainer:[String,Function]},watch:{getContainer:"portal"},mounted(){this.getContainer&&this.portal()},methods:{portal(){const{getContainer:o}=this,n=t?this.$refs[t]:this.$el;let s;var i;o?s="string"==typeof(i=o)?document.querySelector(i):i():this.$parent&&(s=this.$parent.$el),s&&s!==n.parentNode&&s.appendChild(n),e&&e.call(this)}}}}let B=0;const T={mixins:[function(t){const e="binded_"+B++;function o(){this[e]||(t.call(this,O,!0),this[e]=!0)}function n(){this[e]&&(t.call(this,w,!1),this[e]=!1)}return{mounted:o,activated:o,deactivated:n,beforeDestroy:n}}((function(t,e){this.handlePopstate(e&&this.closeOnPopstate)}))],props:{closeOnPopstate:Boolean},data:()=>({bindStatus:!1}),watch:{closeOnPopstate(t){this.handlePopstate(t)}},methods:{onPopstate(){this.close(),this.shouldReopen=!1},handlePopstate(t){if(!this.$isServer&&this.bindStatus!==t){this.bindStatus=t;(t?O:w)(window,"popstate",this.onPopstate)}}}},Y={transitionAppear:Boolean,value:Boolean,overlay:Boolean,overlayStyle:Object,overlayClass:String,closeOnClickOverlay:Boolean,zIndex:[Number,String],lockScroll:{type:Boolean,default:!0},lazyRender:{type:Boolean,default:!0}};const[z,L]=[f(R="sf-"+(R="popup")),l(R)];var R,E=z({mixins:[function(t={}){return{mixins:[x,T,P({afterPortal(){this.overlay&&C()}})],provide(){return{sfPopup:this}},props:Y,data(){return this.onReopenCallback=[],{inited:this.value}},computed:{shouldRender(){return this.inited||!this.lazyRender}},watch:{value(e){const o=e?"open":"close";this.inited=this.inited||this.value,this[o](),t.skipToggleEvent||this.$emit(o)},overlay:"renderOverlay"},mounted(){this.value&&this.open()},activated(){this.shouldReopen&&(this.$emit("input",!0),this.shouldReopen=!1)},beforeDestroy(){!function(t){const e=m.find(t);e&&b(e.overlay.$el)}(this),this.opened&&this.removeLock(),this.getContainer&&b(this.$el)},deactivated(){this.value&&(this.close(),this.shouldReopen=!0)},methods:{open(){this.$isServer||this.opened||(void 0!==this.zIndex&&(m.zIndex=this.zIndex),this.opened=!0,this.renderOverlay(),this.addLock(),this.onReopenCallback.forEach((t=>{t()})))},addLock(){this.lockScroll&&(O(document,"touchstart",this.touchStart),O(document,"touchmove",this.onTouchMove),m.lockCount||document.body.classList.add("sf-overflow-hidden"),m.lockCount++)},removeLock(){this.lockScroll&&m.lockCount&&(m.lockCount--,w(document,"touchstart",this.touchStart),w(document,"touchmove",this.onTouchMove),m.lockCount||document.body.classList.remove("sf-overflow-hidden"))},close(){this.opened&&(g(this),this.opened=!1,this.removeLock(),this.$emit("input",!1))},onTouchMove(t){this.touchMove(t);const e=this.deltaY>0?"10":"01",o=function(t,e=window){let o=t;for(;o&&"HTML"!==o.tagName&&"BODY"!==o.tagName&&1===o.nodeType&&o!==e;){const{overflowY:t}=window.getComputedStyle(o);if(I.test(t))return o;o=o.parentNode}return e}(t.target,this.$el),{scrollHeight:n,offsetHeight:s,scrollTop:i}=o;let r="11";0===i?r=s>=n?"00":"01":i+s>=n&&(r="10"),"11"===r||"vertical"!==this.direction||parseInt(r,2)&parseInt(e,2)||function(t,e){("boolean"!=typeof t.cancelable||t.cancelable)&&t.preventDefault(),e&&function(t){t.stopPropagation()}(t)}(t,!0)},renderOverlay(){!this.$isServer&&this.value&&this.$nextTick((()=>{this.updateZIndex(this.overlay?1:0),this.overlay?$(this,{zIndex:m.zIndex++,duration:this.duration,className:this.overlayClass,customStyle:this.overlayStyle}):g(this)}))},updateZIndex(t=0){this.$el.style.zIndex=++m.zIndex+t},onReopen(t){this.onReopenCallback.push(t)}}}}()],props:{round:Boolean,duration:[Number,String],closeable:Boolean,transition:String,safeAreaInsetBottom:Boolean,closeIcon:{type:String,default:"cross"},closeIconPosition:{type:String,default:"top-right"},position:{type:String,default:"center"},overlay:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}},beforeCreate(){const t=t=>e=>this.$emit(t,e);this.onClick=t("click"),this.onOpened=t("opened"),this.onClosed=t("closed")},methods:{onClickCloseIcon(t){this.$emit("click-close-icon",t),this.close()}},render(){const t=arguments[0];if(!this.shouldRender)return;const{round:e,position:o,duration:n}=this,s="center"===o,i=this.transition||(s?"sf-fade":`sf-popup-slide-${o}`),r={};if(null!=n){r[s?"animationDuration":"transitionDuration"]=`${n}s`}return t("transition",{attrs:{appear:this.transitionAppear,name:i},on:{afterEnter:this.onOpened,afterLeave:this.onClosed}},[t("div",{directives:[{name:"show",value:this.value}],style:r,class:L({round:e,[o]:o,"safe-area-inset-bottom":this.safeAreaInsetBottom}),on:{click:this.onClick}},[this.slots(),this.closeable&&t(a,{attrs:{role:"button",tabindex:"0",name:this.closeIcon},class:L("close-icon",this.closeIconPosition),on:{click:this.onClickCloseIcon}})])])}});export default E;