vue-toggle-component
Version:
vue-toggle-component makes an ease to use, lightweight and highly customizable toggle component for Vue.js.
1 lines • 4.61 kB
JavaScript
var VueToggleComponent=function(e){"use strict";function t(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var o,a,r=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(o=n.next()).done)&&(r.push(o.value),!t||r.length!==t);l=!0);}catch(e){i=!0,a=e}finally{try{l||null==n.return||n.return()}finally{if(i)throw a}}return r}(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 n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var o={name:"VueToggle",props:{activeColor:{type:String,default:"#9FD6AE"},darkTheme:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fontSize:{type:String,default:"16px"},fontWeight:{type:String,default:"normal"},name:{type:String,required:!0},title:{type:String,required:!0},toggled:{type:Boolean,default:!1}},data:function(){return{toggleState:this.toggled}},methods:{toggle:function(){this.disabled||(this.toggleState=!this.toggleState,this.$emit("toggle",this.toggleState))}},computed:{id:function(){return this.name.replace(/ /g,"").toLowerCase()}}},a=e.withScopeId("data-v-5330e797")((function(t,n,o,a,r,l){return e.openBlock(),e.createBlock("section",{class:[{"m-toggle--is-dark":o.darkTheme,"m-toggle--is-disabled":o.disabled},"m-toggle"]},[e.withDirectives(e.createVNode("input",{id:l.id,"onUpdate:modelValue":n[1]||(n[1]=function(e){return r.toggleState=e}),disabled:o.disabled,name:o.name,class:"m-toggle__input",type:"checkbox"},null,8,["id","disabled","name"]),[[e.vModelCheckbox,r.toggleState]]),e.createVNode("span",{"aria-checked":r.toggleState,"aria-disabled":o.disabled,"aria-labelledby":"".concat(l.id,"-label"),"aria-readonly":o.disabled,style:r.toggleState&&{"background-color":o.activeColor},class:"m-toggle__content",role:"checkbox",onClick:n[2]||(n[2]=function(){return l.toggle&&l.toggle.apply(l,arguments)})},null,12,["aria-checked","aria-disabled","aria-labelledby","aria-readonly"]),e.createVNode("label",{id:"".concat(l.id,"-label"),for:l.id,style:{"font-size":o.fontSize,"font-weight":o.fontWeight},class:"m-toggle__label"},e.toDisplayString(o.title),13,["id","for"])],2)}));!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.m-toggle[data-v-5330e797] {\n align-items: center;\n display: flex;\n margin: 0 -5px;\n}\n.m-toggle > *[data-v-5330e797] {\n cursor: pointer;\n margin: 0 5px;\n}\n.m-toggle__label[data-v-5330e797] {\n user-select: none;\n}\n.m-toggle--is-disabled .m-toggle__label[data-v-5330e797] {\n cursor: not-allowed;\n}\n.m-toggle--is-dark .m-toggle__label[data-v-5330e797] {\n color: white;\n}\n.m-toggle__input[data-v-5330e797] {\n display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-5330e797]:after {\n left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-5330e797] {\n background: #F0F0F0;\n border-radius: 2em;\n box-sizing: border-box;\n height: 2em;\n outline: 0;\n overflow: hidden;\n padding: 2px;\n transition: background-color 0.4s ease;\n width: 4em;\n will-change: background-color;\n}\n.m-toggle__content[data-v-5330e797]:after {\n background: white;\n border-radius: 50%;\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n content: '';\n display: block;\n height: 100%;\n left: 0;\n position: relative;\n transition: left 0.2s ease;\n width: calc(50% - 2px);\n will-change: left;\n}\n.m-toggle--is-disabled .m-toggle__content[data-v-5330e797] {\n cursor: not-allowed;\n opacity: 50%;\n}\n.m-toggle--is-dark .m-toggle__content[data-v-5330e797] {\n background: #374151;\n}\n\n"),o.render=a,o.__scopeId="data-v-5330e797";var r=function(){var e=o;return e.install=function(t){t.component("VueToggleComponent",e)},e}(),l=Object.freeze({__proto__:null,default:r});return Object.entries(l).forEach((function(e){var n=t(e,2),o=n[0],a=n[1];"default"!==o&&(r[o]=a)})),r}(Vue);