UNPKG

@ophiuchus/popup

Version:

### 介绍

github.com/songbug1024/ophiuchus

8 lines (7 loc) • 8.67 kB
1
2
3
4
5
6
7
8
var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(t,e,o)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,__spreadValues=(t,e)=>{for(var o in e||(e={}))__hasOwnProp.call(e,o)&&__defNormalProp(t,o,e[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(e))__propIsEnum.call(e,o)&&__defNormalProp(t,o,e[o]);return t}; /*! * @ophiuchus/popup v1.0.1 Sun Sep 26 2021 14:37:15 GMT+0800 (中国标准时间) * (c) 2021 @mws_ophiuchus * Released under the MIT License. */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue"),require("@ophiuchus/overlay"),require("@ophiuchus/icon")):"function"==typeof define&&define.amd?define(["vue","@ophiuchus/overlay","@ophiuchus/icon"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).SFPopup=e(t.Vue,t.SFOverlay,t.SFIcon)}(this,(function(t,e,o){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var s=n(t),i=n(e),r=n(o);function a(t,e){return e?"string"==typeof e?` ${t}--${e}`:Array.isArray(e)?e.reduce(((e,o)=>e+a(t,o)),""):Object.keys(e).reduce(((o,n)=>o+(e[n]?a(t,n):"")),""):""}function l(t){return function(e,o){return e&&"string"!=typeof e&&(o=e,e=""),`${e=e?`${t}__${e}`:t}${a(e,o)}`}}const c=/-(\w)/g;const h={methods:{slots(t="default",e){const{$slots:o,$scopedSlots:n}=this,s=n[t];return s?s(e):o[t]}}};function u(t){const{name:e}=this;t.component(e,this),t.component(`-${e}`.replace(c,((t,e)=>e.toUpperCase())),this)}function d(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 p(t){return function(e){return"function"==typeof e&&(e=d(e)),e.functional||(e.mixins=e.mixins||[],e.mixins.push(h)),e.name=t,e.install=u,e}}const f=s.default.prototype.$isServer;const v={zIndex:2e3,lockCount:0,stack:[],find(t){return this.stack.filter((e=>e.vm===t))[0]}};function m(t){const e=t.parentNode;e&&e.removeChild(t)}const y={className:"",customStyle:{}};function b(t){return function(t,e){const o=new s.default({el:document.createElement("div"),props:t.props,render(o){return o(t,__spreadValues({props:this.$props},e))}});return document.body.appendChild(o.$el),o}(i.default,{on:{click(){t.$emit("click-overlay"),t.closeOnClickOverlay&&(t.onClickOverlay?t.onClickOverlay():t.close())}}})}function S(t){const e=v.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,y,n,{show:!0})}}function g(t){const e=v.find(t);e&&(e.overlay.show=!1)}let k=!1;if(!f)try{const t={};Object.defineProperty(t,"passive",{get(){k=!0}}),window.addEventListener("test-passive",null,t)}catch(E){}function C(t,e,o,n=!1){f||t.addEventListener(e,o,!!k&&{capture:!1,passive:n})}function $(t,e,o){f||t.removeEventListener(e,o)}const O=/scroll|auto/i;const _={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;C(t,"touchstart",e),C(t,"touchmove",o),n&&(C(t,"touchend",n),C(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 w=0;const I={mixins:[function(t){const e="binded_"+w++;function o(){this[e]||(t.call(this,C,!0),this[e]=!0)}function n(){this[e]&&(t.call(this,$,!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?C:$)(window,"popstate",this.onPopstate)}}}},x={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[B,T]=[p(N="sf-"+(N="popup")),l(N)];var N;return B({mixins:[function(t={}){return{mixins:[_,I,P({afterPortal(){this.overlay&&S()}})],provide(){return{sfPopup:this}},props:x,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=v.find(t);e&&m(e.overlay.$el)}(this),this.opened&&this.removeLock(),this.getContainer&&m(this.$el)},deactivated(){this.value&&(this.close(),this.shouldReopen=!0)},methods:{open(){this.$isServer||this.opened||(void 0!==this.zIndex&&(v.zIndex=this.zIndex),this.opened=!0,this.renderOverlay(),this.addLock(),this.onReopenCallback.forEach((t=>{t()})))},addLock(){this.lockScroll&&(C(document,"touchstart",this.touchStart),C(document,"touchmove",this.onTouchMove),v.lockCount||document.body.classList.add("sf-overflow-hidden"),v.lockCount++)},removeLock(){this.lockScroll&&v.lockCount&&(v.lockCount--,$(document,"touchstart",this.touchStart),$(document,"touchmove",this.onTouchMove),v.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(O.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?function(t,e){const o=v.find(t);if(o)o.config=e;else{const o=b(t);v.stack.push({vm:t,config:e,overlay:o})}S(t)}(this,{zIndex:v.zIndex++,duration:this.duration,className:this.overlayClass,customStyle:this.overlayStyle}):g(this)}))},updateZIndex(t=0){this.$el.style.zIndex=++v.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}`),a={};if(null!=n){a[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:a,class:T({round:e,[o]:o,"safe-area-inset-bottom":this.safeAreaInsetBottom}),on:{click:this.onClick}},[this.slots(),this.closeable&&t(r.default,{attrs:{role:"button",tabindex:"0",name:this.closeIcon},class:T("close-icon",this.closeIconPosition),on:{click:this.onClickCloseIcon}})])])}})}));