UNPKG

vue-onoff-toggle

Version:

A smart, lightweight and easy-to-use on/off toggle component for Vue.js with multiple themes.

1 lines 7.66 kB
var VueOnoffToggle=function(e){"use strict";function t(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var o=[],n=!0,i=!1,r=void 0;try{for(var a,s=e[Symbol.iterator]();!(n=(a=s.next()).done)&&(o.push(a.value),!t||o.length!==t);n=!0);}catch(e){i=!0,r=e}finally{try{n||null==s.return||s.return()}finally{if(i)throw r}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return n(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return n(e,t)}(e,t)||function(){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 n(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}function i(e){return"number"==typeof e?"".concat(e,"px"):e}function r(e,t){var o=function(e){var t,o=parseInt,n=e.replace(/\s/g,"");return t=(t=/#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(n))?[o(t[1],16),o(t[2],16),o(t[3],16)]:(t=/#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(n))?[17*o(t[1],16),17*o(t[2],16),17*o(t[3],16)]:(t=/rgba\(([\d]+),([\d]+),([\d]+),([\d]+|[\d]*.[\d]+)\)/.exec(n))?[+t[1],+t[2],+t[3],+t[4]]:(t=/rgb\(([\d]+),([\d]+),([\d]+)\)/.exec(n))?[+t[1],+t[2],+t[3]]:[0,0,0,1],isNaN(t[3])&&(t[3]=1),t.slice(0,4)}(e);return"rgba(".concat(o[0],", ").concat(o[1],", ").concat(o[2],", ").concat(o[3]*t,")")}var a,s=(t(a={},"default",{size:{width:75,height:40},color:{on:"#f3a978",off:"#5a6676",thumb:"#ffffff"},margin:6}),t(a,"ios",{size:{width:60,height:36},color:{on:"#13bf11",off:"#f8f8f8",border:"#dddddd",thumb:"#ffffff"},margin:2}),t(a,"material",{size:{width:34,height:14},color:{on:"rgba(25, 118, 210, 0.5)",off:"#9f9f9f",thumb:"rgb(25, 118, 210)",disabled:"rgba(0, 0, 0, 0.12)"},margin:-3}),a),l={name:"OnoffToggle",props:{value:{type:Boolean,default:!1},theme:{type:String,default:"default"},name:{type:String},disabled:{type:Boolean,default:!1},onColor:{type:String},offColor:{type:String},thumbColor:{type:String},borderColor:{type:String},width:{type:[Number,String]},height:{type:[Number,String]},margin:{type:[Number,String]},shadow:{type:Boolean,default:!0}},computed:{themeInfo:function(){return s[this.theme]||s.default},labelClass:function(){var e=["v-toggle","v-toggle-"+this.theme,this.value?"on":"off"];return this.disabled&&e.push("disabled"),e},labelStyle:function(){var e=this.bodyWidth,t=this.bodyHeight,o=this.onColor||this.themeInfo.color.on,n=this.offColor||this.themeInfo.color.off,a=Number(this.margin)||this.themeInfo.margin||0,l=this.borderColor||this.themeInfo.color.border,d={width:i(e),height:i(t),borderRadius:i(t/2),backgroundColor:this.value?o:n};return"ios"===this.theme?Object.assign(d,{backgroundColor:this.value?o:n,boxShadow:"inset 0 0 0 ".concat(this.value?t/2:0,"px ").concat(o,", 0 0 0 ").concat(a,"px ").concat(this.value?o:l)}):"material"===this.theme?this.disabled?Object.assign(d,{backgroundColor:s.material.color.disabled,opacity:1}):this.value&&!this.onColor&&this.thumbColor&&(d.backgroundColor=r(this.thumbColor,.5)):"default"===this.theme&&this.shadow&&(d.boxShadow="0px 4px 10px 0px ".concat(r(this.value?o:n,.4))),d},thumbStyle:function(){var e=Number(this.margin)||this.themeInfo.margin||0,t=this.bodyHeight-2*e,o=this.thumbColor||this.themeInfo.color.thumb,n=this.value?this.bodyWidth-t-e:e,r=this.borderColor||this.themeInfo.color.border,a={width:i(t),height:i(t),left:i(n),top:i(e),borderRadius:i(t/2),backgroundColor:o,boxShadow:"0px 1px 3px 0px rgba(0, 0, 0, 0.1)"};return"ios"===this.theme?Object.assign(a,{width:i(this.bodyHeight),height:i(this.bodyHeight),left:this.value?"calc(100% - ".concat(this.bodyHeight,"px)"):i(0),top:i(0),borderRadius:i(this.bodyHeight/2),backgroundColor:o,boxShadow:this.value?"0 0 0 ".concat(e,"px transparent, 0 3px 3px rgba(0, 0, 0, 0.3)"):"0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 ".concat(e,"px ").concat(r)}):"material"===this.theme&&(Object.assign(a,{backgroundColor:this.value?o:"#ffffff",transition:"left 0.15s",boxShadow:"0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"}),this.disabled&&(a.backgroundColor="#bdbdbd")),a},bodyWidth:function(){return Number(this.width)||this.themeInfo.size.width},bodyHeight:function(){return Number(this.height)||this.themeInfo.size.height}}};function d(e,t,o,n,i,r,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const h="function"==typeof o?o.options:o;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,i&&(h.functional=!0)),n&&(h._scopeId=n),r?(c=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__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},h._ssrRegister=c):t&&(c=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),c)if(h.functional){const e=h.render;h.render=function(t,o){return c.call(o),e(t,o)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return o}const h="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function c(e){return(e,t)=>function(e,t){const o=h?t.media||"default":e,n=f[o]||(f[o]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);let o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===u&&(u=document.head||document.getElementsByTagName("head")[0]),u.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const e=n.ids.size-1,t=document.createTextNode(o),i=n.element.childNodes;i[e]&&n.element.removeChild(i[e]),i.length?n.element.insertBefore(t,i[e]):n.element.appendChild(t)}}}(e,t)}let u;const f={};var b=d({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("label",{class:e.labelClass,style:e.labelStyle},[o("input",{attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{checked:e.value},on:{change:function(t){return e.$emit("input",t.target.checked)}}}),e._v(" "),o("div",{staticClass:"v-toggle_thumb",style:e.thumbStyle})])},staticRenderFns:[]},(function(e){e&&e("data-v-78477d37_0",{source:".v-toggle[data-v-78477d37]{display:inline-block;position:relative;cursor:pointer;transition:all .3s}.v-toggle.disabled[data-v-78477d37]{opacity:.5;cursor:auto}.v-toggle input[data-v-78477d37]{margin:0;padding:0;width:0;height:0;opacity:0;outline:0}.v-toggle_thumb[data-v-78477d37]{position:absolute;transition:all .3s}",map:void 0,media:void 0})}),l,"data-v-78477d37",!1,void 0,!1,c,void 0,void 0),p=Object.freeze({__proto__:null,OnoffToggle:b}),g=function(e){g.installed||(g.installed=!0,Object.entries(p).forEach((function(t){var n=o(t,2),i=n[0],r=n[1];e.component(i,r)})))},m={install:g},y=null;return"undefined"!=typeof window?y=window.Vue:"undefined"!=typeof global&&(y=global.Vue),y&&y.use(m),e.OnoffToggle=b,e.default=m,Object.defineProperty(e,"__esModule",{value:!0}),e}({});