UNPKG

vue-ios-alertview

Version:

iOS7+ style alertview service for Vue.

1 lines 7.6 kB
(function(e,t){typeof exports==="object"&&typeof module!=="undefined"?t(exports):typeof define==="function"&&define.amd?define(["exports"],t):t(e.vueIosAlertview=e.vueIosAlertview||{})})(this,function(e){"use strict";var t=function(){var e;var t;var o;e=new Promise(function(e,i){t=e;o=i});return{promise:e,resolve:t,reject:o}};(function(){if(document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),o=" .ios-alertview-overlay{ font-family: Helvetica Neue,Helvetica,Arial,sans-serif; color: #000; font-size: 14px; line-height: 1.4; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10600; } .ios-alertview-overlay.v-enter{ opacity: 0; } .ios-alertview-overlay.v-enter-active{ transition: opacity .4s; } .ios-alertview-overlay.v-leave-active{ opacity: 0; transition: opacity .4s; } .ios-alertview-overlay *{ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .ios-alertview{ width: 270px; position: absolute; z-index: 11000; left: 50%; top: 50%; text-align: center; border-radius: 7px; transform: translate3d(-50%, -50%, 0); } .ios-alertview-overlay.v-enter .ios-alertview{ opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.185); } .ios-alertview-overlay.v-enter-active .ios-alertview{ transition: all .4s; } .ios-alertview-overlay.v-leave-active .ios-alertview{ opacity: 0; z-index: 10999; transform: translate3d(-50%, -50%, 0) scale(0.815); transition: all .4s; } .ios-alertview-inner{ padding: 15px; border-bottom: 1px solid #b5b5b5; border-top-left-radius: 7px; border-top-right-radius: 7px; background: #e8e8e8; } .ios-alertview-inner-remind{ border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; } .ios-alertview-title{ font-weight: bold; font-size: 18px; text-align: center; } .ios-alertview-title + .ios-alertview-text{ margin-top: 5px; } .ios-alertview-text-input{ outline: 0; box-sizing: border-box; height: 30px; background: #fff; margin: 0; margin-top: 15px; padding: 0 5px; border: 1px solid #a0a0a0; border-radius: 5px; width: 100%; font-size: 14px; font-family: inherit; display: block; box-shadow: 0 0 0 rgba(0, 0, 0, 0); appearance: none; } .ios-alertview-buttons{ overflow: hidden; } .ios-alertview-buttons-horizontal{ height: 44px; display: flex; justify-content: center; } .ios-alertview-button{ width: 100%; padding: 0 5px; height: 44px; font-size: 17px; line-height: 44px; text-align: center; color: #007aff; background: #e8e8e8; display: block; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; border-bottom: 1px solid #b5b5b5; box-sizing: border-box; } .ios-alertview-button.ios-alertview-button-bold{ font-weight: bold; } .ios-alertview-button:active{ background-color: #d4d4d4; } .ios-alertview-button:last-child{ border-radius: 0 0 7px 7px; } .ios-alertview-buttons-horizontal .ios-alertview-button{ border-bottom: none; border-right: 1px solid #b5b5b5; flex: 1; } .ios-alertview-buttons-horizontal .ios-alertview-button:first-child{ /* cancel */ border-radius: 0 0 0 7px; } .ios-alertview-buttons-horizontal .ios-alertview-button:last-child{ /* OK */ border-right: none; border-radius: 0 0 7px 0; } .ios-alertview-buttons-horizontal .ios-alertview-button:first-child:last-child{ border-radius: 0 0 7px 7px; } ";t.type="text/css";if(t.styleSheet){t.styleSheet.cssText=o}else{t.appendChild(document.createTextNode(o))}e.appendChild(t)}})();var o=400;var i={render:function(){var e=this;var t=e.$createElement;var o=e._self._c||t;return o("transition",{on:{"after-leave":e.afterLeave}},[e.showModal?o("div",{staticClass:"ios-alertview-overlay"},[o("div",{staticClass:"ios-alertview"},[o("div",{staticClass:"ios-alertview-inner",class:{"ios-alertview-inner-remind":!e.buttons||!e.buttons.length}},[e.title?o("div",{staticClass:"ios-alertview-title"},[e._v(e._s(e.title))]):e._e(),e.text?o("div",{staticClass:"ios-alertview-text",domProps:{innerHTML:e._s(e.text)}}):e._e(),e.input?o("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"ios-alertview-text-input",attrs:{autofocus:"",placeholder:e.placeholder},domProps:{value:e.value},on:{input:function(t){if(t.target.composing){return}e.value=t.target.value}}}):e._e()]),e.buttons&&e.buttons.length?o("div",{staticClass:"ios-alertview-buttons",class:{"ios-alertview-buttons-horizontal":e.buttons.length<=2}},e._l(e.buttons,function(t,i){return o("span",{staticClass:"ios-alertview-button",class:{"ios-alertview-button-bold":t.bold},on:{click:function(o){o.preventDefault();o.stopPropagation();e.onClick(t,i)}}},[e._v(e._s(t.text))])})):e._e()])]):e._e()])},staticRenderFns:[],data:function(){return{value:"",showModal:false}},props:["title","text","input","placeholder","onClick","remindDuration","buttons"],methods:{activate:function(){var e=this;this._deferred=t();this.showModal=true;if(!this.buttons||!this.buttons.length){setTimeout(function(){e.showModal=false;e._deferred.resolve()},o+this.remindDuration)}return this._deferred.promise},onClick:function(e,t){var o={index:t,button:e,value:this.value};if(typeof e.onClick==="function"){e.onClick(o)}this._deferred.resolve(o);this.showModal=false},afterLeave:function(){this.$destroy();this.$el.parentNode.removeChild(this.$el)}}};var r=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty;var a=Object.prototype.propertyIsEnumerable;function s(e){if(e===null||e===undefined){throw new TypeError("Object.assign cannot be called with null or undefined")}return Object(e)}function l(){try{if(!Object.assign){return false}var e=new String("abc");e[5]="de";if(Object.getOwnPropertyNames(e)[0]==="5"){return false}var t={};for(var o=0;o<10;o++){t["_"+String.fromCharCode(o)]=o}var i=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if(i.join("")!=="0123456789"){return false}var r={};"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e});if(Object.keys(Object.assign({},r)).join("")!=="abcdefghijklmnopqrst"){return false}return true}catch(e){return false}}var d=l()?Object.assign:function(e,t){var o=arguments;var i;var l=s(e);var d;for(var u=1;u<arguments.length;u++){i=Object(o[u]);for(var c in i){if(n.call(i,c)){l[c]=i[c]}}if(r){d=r(i);for(var v=0;v<d.length;v++){if(a.call(i,d[v])){l[d[v]]=i[d[v]]}}}}return l};var u={defaultOption:"title",title:null,text:null,input:false,placeholder:"",cancelText:"Cancel",okText:"OK",remindDuration:650};function c(e,o){if(o===void 0)o={};if(typeof o!=="object"){throw new Error("Expect Object options")}var r=e.extend(i);d(u,o);function n(e){if(e===void 0)e={};var t=d({},u);if(typeof e==="string"){t[u.defaultOption]=e}else{t=d(t,e)}return t}function a(e){var t=n(e);var o=new r({propsData:t});var i=document.createElement("div");i.id="ios-alert-view-"+Date.now();document.body.appendChild(i);o.$mount(i);return o.activate()}e.prototype.$iosAlertView=a;e.prototype.$iosAlert=function(e){var o=t();var i=n(e);i.buttons=[{text:i.okText,onClick:o.resolve,bold:true}];a(i);return o.promise};e.prototype.$iosConfirm=function(e){var o=t();var i=n(e);i.buttons=[{text:i.cancelText,onClick:o.reject},{text:i.okText,onClick:o.resolve,bold:true}];a(i);return o.promise};e.prototype.$iosPrompt=function(e){var o=t();var i=n(e);i.input=true;i.buttons=[{text:i.cancelText,onClick:o.reject},{text:i.okText,onClick:function(e){o.resolve(e.value)},bold:true}];a(i);return o.promise};e.prototype.$iosRemind=function(e){var t=n(e);return a(t)}}if(typeof window!=="undefined"&&window.Vue){window.Vue.use(c)}e["default"]=c;Object.defineProperty(e,"__esModule",{value:true})});