@vueform/toggle - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+## v1.1.0
+
+> `2020-01-06`
+
+### 🎉 Features
+  - **BREAKING:** Restructured `colors` property
+
 ## v1.0.1
@@ -2,0 +9,0 @@

dist/toggle.global.js

@@ -1,1 +0,1 @@
-var VueformToggle=function(e,l){"use strict";var t={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},offBackground:{type:String,required:!1,default:"#d4e0e7"},onBackground:{type:String,required:!1,default:"#41b883"},disabledBackground:{type:String,required:!1,default:"#d4e0e7"},offTextColor:{type:String,required:!1,default:"#80878c"},onTextColor:{type:String,required:!1,default:"#ffffff"},disabledTextColor:{type:String,required:!1,default:"#80878c"},handleColor:{type:String,required:!1,default:"#ffffff"},disabledHandleColor:{type:String,required:!1,default:"#f2faff"},fontSize:{type:String,required:!1,default:"13px"}},setup(l,t){const u=function(l,t,u){var a=e.toRefs(l),r=a.value,o=a.modelValue,n=a.falseValue,d=a.trueValue,i=void 0!==t.expose?o:r,f=function(e){t.emit("input",e),t.emit("update:modelValue",e),t.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(n.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:n.value)}}}(l,t),a=function(l,t,u){var a=e.toRefs(l),r=a.width,o=a.height,n=a.speed,d=a.offBackground,i=a.onBackground,f=a.disabledBackground,g=a.offTextColor,c=a.onTextColor,p=a.disabledTextColor,s=a.fontSize,v=a.handleColor,b=a.disabledHandleColor;return{cssVars:e.computed((function(){return{"--toggle-off-background":d.value,"--toggle-on-background":i.value,"--toggle-disabled-background":f.value,"--toggle-off-text-color":g.value,"--toggle-on-text-color":c.value,"--toggle-disabled-text-color":p.value,"--toggle-handle-color":v.value,"--toggle-disabled-handle-color":b.value,"--toggle-height":o.value+"px","--toggle-width":r.value+"px","--toggle-speed":n.value/1e3+"s","--toggle-radius":o.value/2+"px","--toggle-handle-size":o.value-6+"px","--toggle-handle-right-on":o.value-3+"px","--toggle-font-size":s.value}}))}}(l),r=function(l,t,u){var a=e.toRefs(l),r=a.trueValue,o=a.falseValue,n=u.inputValue,d=u.update,i=e.computed((function(){return n.value===r.value}));return{checked:i,toggle:function(){d(i.value?o.value:r.value)},on:function(){d(r.value)},off:function(){d(o.value)}}}(l,0,{inputValue:u.inputValue,update:u.update});return{...u,...a,...r}}};return t.render=function(e,t,u,a,r,o){return l.openBlock(),l.createBlock("div",{class:"toggle-input",style:e.cssVars},[l.createVNode("input",{type:"checkbox",name:u.name,id:u.id,disabled:u.disabled,checked:e.checked,trueValue:u.trueValue,falseValue:u.falseValue,onInput:t[1]||(t[1]=(...l)=>e.handleInput&&e.handleInput(...l))},null,40,["name","id","disabled","checked","trueValue","falseValue"]),l.createVNode("label",{for:u.id},[l.renderSlot(e.$slots,"on",{},(()=>[l.createVNode("span",{class:"toggle-on",innerHTML:u.onLabel},null,8,["innerHTML"])])),l.renderSlot(e.$slots,"off",{},(()=>[l.createVNode("span",{class:"toggle-off",innerHTML:u.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},t.__file="src/Toggle.vue",t}(Vue,Vue);
+var VueformToggle=function(e,l){"use strict";var t={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},colors:{type:Object,required:!1,default:()=>({})},fontSize:{type:String,required:!1,default:"13px"}},setup(l,t){const u=function(l,t,u){var a=e.toRefs(l),n=a.value,o=a.modelValue,r=a.falseValue,d=a.trueValue,f=void 0!==t.expose?o:n,i=function(e){t.emit("input",e),t.emit("update:modelValue",e),t.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(f.value)&&i(r.value),-1!==[!0,1,"1","on"].indexOf(f.value)&&i(d.value),{inputValue:f,update:i,handleInput:function(e){i(e.target.checked?d.value:r.value)}}}(l,t),a=function(l,t,u){var a=e.toRefs(l),n=a.width,o=a.height,r=a.speed,d=a.colors,f=a.fontSize,i=e.ref({background:{on:"#41b883",off:"#d4e0e7",disabled:"#d4e0e7"},text:{on:"#ffffff",off:"#80878c",disabled:"#80878c"},handle:{on:"#ffffff",off:"#ffffff",disabled:"#f2faff"}}),g=e.computed((function(){var e=Object.assign({},i.value);return d.value.background&&(e.background=Object.assign({},e.background,d.value.background)),d.value.text&&(e.text=Object.assign({},e.text,d.value.text)),d.value.handle&&(e.handle=Object.assign({},e.handle,d.value.handle)),e}));return{cssVars:e.computed((function(){return{"--toggle-off-background":g.value.background.off,"--toggle-on-background":g.value.background.on,"--toggle-disabled-background":g.value.background.disabled,"--toggle-off-text-color":g.value.text.off,"--toggle-on-text-color":g.value.text.on,"--toggle-disabled-text-color":g.value.text.disabled,"--toggle-on-handle-color":g.value.handle.on,"--toggle-off-handle-color":g.value.handle.off,"--toggle-disabled-handle-color":g.value.handle.disabled,"--toggle-height":o.value+"px","--toggle-width":n.value+"px","--toggle-speed":r.value/1e3+"s","--toggle-radius":o.value/2+"px","--toggle-handle-size":o.value-6+"px","--toggle-handle-right-on":o.value-3+"px","--toggle-font-size":f.value}}))}}(l),n=function(l,t,u){var a=e.toRefs(l),n=a.trueValue,o=a.falseValue,r=u.inputValue,d=u.update,f=e.computed((function(){return r.value===n.value}));return{checked:f,toggle:function(){d(f.value?o.value:n.value)},on:function(){d(n.value)},off:function(){d(o.value)}}}(l,0,{inputValue:u.inputValue,update:u.update});return{...u,...a,...n}}};return t.render=function(e,t,u,a,n,o){return l.openBlock(),l.createBlock("div",{class:"toggle-input",style:e.cssVars},[l.createVNode("input",{type:"checkbox",name:u.name,id:u.id,disabled:u.disabled,checked:e.checked,trueValue:u.trueValue,falseValue:u.falseValue,onInput:t[1]||(t[1]=(...l)=>e.handleInput&&e.handleInput(...l))},null,40,["name","id","disabled","checked","trueValue","falseValue"]),l.createVNode("label",{for:u.id},[l.renderSlot(e.$slots,"on",{},(()=>[l.createVNode("span",{class:"toggle-on",innerHTML:u.onLabel},null,8,["innerHTML"])])),l.renderSlot(e.$slots,"off",{},(()=>[l.createVNode("span",{class:"toggle-off",innerHTML:u.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},t.__file="src/Toggle.vue",t}(Vue,Vue);

dist/toggle.js

@@ -1,1 +0,1 @@
-import{toRefs as e,computed as l,openBlock as t,createBlock as u,createVNode as a,renderSlot as r}from"vue";var n={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},offBackground:{type:String,required:!1,default:"#d4e0e7"},onBackground:{type:String,required:!1,default:"#41b883"},disabledBackground:{type:String,required:!1,default:"#d4e0e7"},offTextColor:{type:String,required:!1,default:"#80878c"},onTextColor:{type:String,required:!1,default:"#ffffff"},disabledTextColor:{type:String,required:!1,default:"#80878c"},handleColor:{type:String,required:!1,default:"#ffffff"},disabledHandleColor:{type:String,required:!1,default:"#f2faff"},fontSize:{type:String,required:!1,default:"13px"}},setup(t,u){const a=function(l,t,u){var a=e(l),r=a.value,n=a.modelValue,o=a.falseValue,d=a.trueValue,i=void 0!==t.expose?n:r,f=function(e){t.emit("input",e),t.emit("update:modelValue",e),t.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(o.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:o.value)}}}(t,u),r=function(t,u,a){var r=e(t),n=r.width,o=r.height,d=r.speed,i=r.offBackground,f=r.onBackground,g=r.disabledBackground,p=r.offTextColor,s=r.onTextColor,c=r.disabledTextColor,v=r.fontSize,b=r.handleColor,h=r.disabledHandleColor;return{cssVars:l((function(){return{"--toggle-off-background":i.value,"--toggle-on-background":f.value,"--toggle-disabled-background":g.value,"--toggle-off-text-color":p.value,"--toggle-on-text-color":s.value,"--toggle-disabled-text-color":c.value,"--toggle-handle-color":b.value,"--toggle-disabled-handle-color":h.value,"--toggle-height":o.value+"px","--toggle-width":n.value+"px","--toggle-speed":d.value/1e3+"s","--toggle-radius":o.value/2+"px","--toggle-handle-size":o.value-6+"px","--toggle-handle-right-on":o.value-3+"px","--toggle-font-size":v.value}}))}}(t),n=function(t,u,a){var r=e(t),n=r.trueValue,o=r.falseValue,d=a.inputValue,i=a.update,f=l((function(){return d.value===n.value}));return{checked:f,toggle:function(){i(f.value?o.value:n.value)},on:function(){i(n.value)},off:function(){i(o.value)}}}(t,0,{inputValue:a.inputValue,update:a.update});return{...a,...r,...n}}};n.render=function(e,l,n,o,d,i){return t(),u("div",{class:"toggle-input",style:e.cssVars},[a("input",{type:"checkbox",name:n.name,id:n.id,disabled:n.disabled,checked:e.checked,trueValue:n.trueValue,falseValue:n.falseValue,onInput:l[1]||(l[1]=(...l)=>e.handleInput&&e.handleInput(...l))},null,40,["name","id","disabled","checked","trueValue","falseValue"]),a("label",{for:n.id},[r(e.$slots,"on",{},(()=>[a("span",{class:"toggle-on",innerHTML:n.onLabel},null,8,["innerHTML"])])),r(e.$slots,"off",{},(()=>[a("span",{class:"toggle-off",innerHTML:n.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},n.__file="src/Toggle.vue";export default n;
+import{toRefs as e,ref as l,computed as a,openBlock as u,createBlock as t,createVNode as n,renderSlot as o}from"vue";var d={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},colors:{type:Object,required:!1,default:()=>({})},fontSize:{type:String,required:!1,default:"13px"}},setup(u,t){const n=function(l,a,u){var t=e(l),n=t.value,o=t.modelValue,d=t.falseValue,r=t.trueValue,f=void 0!==a.expose?o:n,i=function(e){a.emit("input",e),a.emit("update:modelValue",e),a.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(f.value)&&i(d.value),-1!==[!0,1,"1","on"].indexOf(f.value)&&i(r.value),{inputValue:f,update:i,handleInput:function(e){i(e.target.checked?r.value:d.value)}}}(u,t),o=function(u,t,n){var o=e(u),d=o.width,r=o.height,f=o.speed,i=o.colors,g=o.fontSize,c=l({background:{on:"#41b883",off:"#d4e0e7",disabled:"#d4e0e7"},text:{on:"#ffffff",off:"#80878c",disabled:"#80878c"},handle:{on:"#ffffff",off:"#ffffff",disabled:"#f2faff"}}),s=a((function(){var e=Object.assign({},c.value);return i.value.background&&(e.background=Object.assign({},e.background,i.value.background)),i.value.text&&(e.text=Object.assign({},e.text,i.value.text)),i.value.handle&&(e.handle=Object.assign({},e.handle,i.value.handle)),e}));return{cssVars:a((function(){return{"--toggle-off-background":s.value.background.off,"--toggle-on-background":s.value.background.on,"--toggle-disabled-background":s.value.background.disabled,"--toggle-off-text-color":s.value.text.off,"--toggle-on-text-color":s.value.text.on,"--toggle-disabled-text-color":s.value.text.disabled,"--toggle-on-handle-color":s.value.handle.on,"--toggle-off-handle-color":s.value.handle.off,"--toggle-disabled-handle-color":s.value.handle.disabled,"--toggle-height":r.value+"px","--toggle-width":d.value+"px","--toggle-speed":f.value/1e3+"s","--toggle-radius":r.value/2+"px","--toggle-handle-size":r.value-6+"px","--toggle-handle-right-on":r.value-3+"px","--toggle-font-size":g.value}}))}}(u),d=function(l,u,t){var n=e(l),o=n.trueValue,d=n.falseValue,r=t.inputValue,f=t.update,i=a((function(){return r.value===o.value}));return{checked:i,toggle:function(){f(i.value?d.value:o.value)},on:function(){f(o.value)},off:function(){f(d.value)}}}(u,0,{inputValue:n.inputValue,update:n.update});return{...n,...o,...d}}};d.render=function(e,l,a,d,r,f){return u(),t("div",{class:"toggle-input",style:e.cssVars},[n("input",{type:"checkbox",name:a.name,id:a.id,disabled:a.disabled,checked:e.checked,trueValue:a.trueValue,falseValue:a.falseValue,onInput:l[1]||(l[1]=(...l)=>e.handleInput&&e.handleInput(...l))},null,40,["name","id","disabled","checked","trueValue","falseValue"]),n("label",{for:a.id},[o(e.$slots,"on",{},(()=>[n("span",{class:"toggle-on",innerHTML:a.onLabel},null,8,["innerHTML"])])),o(e.$slots,"off",{},(()=>[n("span",{class:"toggle-off",innerHTML:a.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},d.__file="src/Toggle.vue";export default d;

dist/toggle.vue2.global.js

@@ -1,1 +0,1 @@
-var VueformToggle=function(e){"use strict";function t(e,t,n,o,r,u,l,a,d,i){"boolean"!=typeof l&&(d=a,a=l,l=!1);var f,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,r&&(s.functional=!0)),o&&(s._scopeId=o),u?(f=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,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(u)},s._ssrRegister=f):t&&(f=l?function(e){t.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),f)if(s.functional){var g=s.render;s.render=function(e,t){return f.call(t),g(e,t)}}else{var c=s.beforeCreate;s.beforeCreate=c?[].concat(c,f):[f]}return n}const n={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},offBackground:{type:String,required:!1,default:"#d4e0e7"},onBackground:{type:String,required:!1,default:"#41b883"},disabledBackground:{type:String,required:!1,default:"#d4e0e7"},offTextColor:{type:String,required:!1,default:"#80878c"},onTextColor:{type:String,required:!1,default:"#ffffff"},disabledTextColor:{type:String,required:!1,default:"#80878c"},handleColor:{type:String,required:!1,default:"#ffffff"},disabledHandleColor:{type:String,required:!1,default:"#f2faff"},fontSize:{type:String,required:!1,default:"13px"}},setup(t,n){const o=function(t,n,o){var r=e.toRefs(t),u=r.value,l=r.modelValue,a=r.falseValue,d=r.trueValue,i=void 0!==n.expose?l:u,f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(a.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:a.value)}}}(t,n),r=function(t,n,o){var r=e.toRefs(t),u=r.width,l=r.height,a=r.speed,d=r.offBackground,i=r.onBackground,f=r.disabledBackground,s=r.offTextColor,g=r.onTextColor,c=r.disabledTextColor,p=r.fontSize,v=r.handleColor,b=r.disabledHandleColor;return{cssVars:e.computed((function(){return{"--toggle-off-background":d.value,"--toggle-on-background":i.value,"--toggle-disabled-background":f.value,"--toggle-off-text-color":s.value,"--toggle-on-text-color":g.value,"--toggle-disabled-text-color":c.value,"--toggle-handle-color":v.value,"--toggle-disabled-handle-color":b.value,"--toggle-height":l.value+"px","--toggle-width":u.value+"px","--toggle-speed":a.value/1e3+"s","--toggle-radius":l.value/2+"px","--toggle-handle-size":l.value-6+"px","--toggle-handle-right-on":l.value-3+"px","--toggle-font-size":p.value}}))}}(t),u=function(t,n,o){var r=e.toRefs(t),u=r.trueValue,l=r.falseValue,a=o.inputValue,d=o.update,i=e.computed((function(){return a.value===u.value}));return{checked:i,toggle:function(){d(i.value?l.value:u.value)},on:function(){d(u.value)},off:function(){d(l.value)}}}(t,0,{inputValue:o.inputValue,update:o.update});return{...o,...r,...u}}};var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"toggle-input",style:e.cssVars},[n("input",{attrs:{type:"checkbox",name:e.name,id:e.id,disabled:e.disabled,trueValue:e.trueValue,falseValue:e.falseValue},domProps:{checked:e.checked},on:{input:e.handleInput}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("on",[n("span",{staticClass:"toggle-on",domProps:{innerHTML:e._s(e.onLabel)}})]),e._v(" "),e._t("off",[n("span",{staticClass:"toggle-off",domProps:{innerHTML:e._s(e.offLabel)}})])],2)])};o._withStripped=!0;return t({render:o,staticRenderFns:[]},undefined,n,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI);
+var VueformToggle=function(e){"use strict";function t(e,t,n,a,o,l,u,r,d,i){"boolean"!=typeof u&&(d=r,r=u,u=!1);var f,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,o&&(s.functional=!0)),a&&(s._scopeId=a),l?(f=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,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},s._ssrRegister=f):t&&(f=u?function(e){t.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),f)if(s.functional){var c=s.render;s.render=function(e,t){return f.call(t),c(e,t)}}else{var g=s.beforeCreate;s.beforeCreate=g?[].concat(g,f):[f]}return n}const n={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},colors:{type:Object,required:!1,default:()=>({})},fontSize:{type:String,required:!1,default:"13px"}},setup(t,n){const a=function(t,n,a){var o=e.toRefs(t),l=o.value,u=o.modelValue,r=o.falseValue,d=o.trueValue,i=void 0!==n.expose?u:l,f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(r.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:r.value)}}}(t,n),o=function(t,n,a){var o=e.toRefs(t),l=o.width,u=o.height,r=o.speed,d=o.colors,i=o.fontSize,f=e.ref({background:{on:"#41b883",off:"#d4e0e7",disabled:"#d4e0e7"},text:{on:"#ffffff",off:"#80878c",disabled:"#80878c"},handle:{on:"#ffffff",off:"#ffffff",disabled:"#f2faff"}}),s=e.computed((function(){var e=Object.assign({},f.value);return d.value.background&&(e.background=Object.assign({},e.background,d.value.background)),d.value.text&&(e.text=Object.assign({},e.text,d.value.text)),d.value.handle&&(e.handle=Object.assign({},e.handle,d.value.handle)),e}));return{cssVars:e.computed((function(){return{"--toggle-off-background":s.value.background.off,"--toggle-on-background":s.value.background.on,"--toggle-disabled-background":s.value.background.disabled,"--toggle-off-text-color":s.value.text.off,"--toggle-on-text-color":s.value.text.on,"--toggle-disabled-text-color":s.value.text.disabled,"--toggle-on-handle-color":s.value.handle.on,"--toggle-off-handle-color":s.value.handle.off,"--toggle-disabled-handle-color":s.value.handle.disabled,"--toggle-height":u.value+"px","--toggle-width":l.value+"px","--toggle-speed":r.value/1e3+"s","--toggle-radius":u.value/2+"px","--toggle-handle-size":u.value-6+"px","--toggle-handle-right-on":u.value-3+"px","--toggle-font-size":i.value}}))}}(t),l=function(t,n,a){var o=e.toRefs(t),l=o.trueValue,u=o.falseValue,r=a.inputValue,d=a.update,i=e.computed((function(){return r.value===l.value}));return{checked:i,toggle:function(){d(i.value?u.value:l.value)},on:function(){d(l.value)},off:function(){d(u.value)}}}(t,0,{inputValue:a.inputValue,update:a.update});return{...a,...o,...l}}};var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"toggle-input",style:e.cssVars},[n("input",{attrs:{type:"checkbox",name:e.name,id:e.id,disabled:e.disabled,trueValue:e.trueValue,falseValue:e.falseValue},domProps:{checked:e.checked},on:{input:e.handleInput}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("on",[n("span",{staticClass:"toggle-on",domProps:{innerHTML:e._s(e.onLabel)}})]),e._v(" "),e._t("off",[n("span",{staticClass:"toggle-off",domProps:{innerHTML:e._s(e.offLabel)}})])],2)])};a._withStripped=!0;return t({render:a,staticRenderFns:[]},undefined,n,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI);

dist/toggle.vue2.js

@@ -1,1 +0,1 @@
-import{toRefs as e,computed as t}from"@vue/composition-api";function n(e,t,n,o,r,l,a,u,d,i){"boolean"!=typeof a&&(d=u,u=a,a=!1);var f,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,r&&(s.functional=!0)),o&&(s._scopeId=o),l?(f=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,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},s._ssrRegister=f):t&&(f=a?function(e){t.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,u(e))}),f)if(s.functional){var g=s.render;s.render=function(e,t){return f.call(t),g(e,t)}}else{var p=s.beforeCreate;s.beforeCreate=p?[].concat(p,f):[f]}return n}const o={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},offBackground:{type:String,required:!1,default:"#d4e0e7"},onBackground:{type:String,required:!1,default:"#41b883"},disabledBackground:{type:String,required:!1,default:"#d4e0e7"},offTextColor:{type:String,required:!1,default:"#80878c"},onTextColor:{type:String,required:!1,default:"#ffffff"},disabledTextColor:{type:String,required:!1,default:"#80878c"},handleColor:{type:String,required:!1,default:"#ffffff"},disabledHandleColor:{type:String,required:!1,default:"#f2faff"},fontSize:{type:String,required:!1,default:"13px"}},setup(n,o){const r=function(t,n,o){var r=e(t),l=r.value,a=r.modelValue,u=r.falseValue,d=r.trueValue,i=void 0!==n.expose?a:l,f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(u.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:u.value)}}}(n,o),l=function(n,o,r){var l=e(n),a=l.width,u=l.height,d=l.speed,i=l.offBackground,f=l.onBackground,s=l.disabledBackground,g=l.offTextColor,p=l.onTextColor,c=l.disabledTextColor,v=l.fontSize,b=l.handleColor,h=l.disabledHandleColor;return{cssVars:t((function(){return{"--toggle-off-background":i.value,"--toggle-on-background":f.value,"--toggle-disabled-background":s.value,"--toggle-off-text-color":g.value,"--toggle-on-text-color":p.value,"--toggle-disabled-text-color":c.value,"--toggle-handle-color":b.value,"--toggle-disabled-handle-color":h.value,"--toggle-height":u.value+"px","--toggle-width":a.value+"px","--toggle-speed":d.value/1e3+"s","--toggle-radius":u.value/2+"px","--toggle-handle-size":u.value-6+"px","--toggle-handle-right-on":u.value-3+"px","--toggle-font-size":v.value}}))}}(n),a=function(n,o,r){var l=e(n),a=l.trueValue,u=l.falseValue,d=r.inputValue,i=r.update,f=t((function(){return d.value===a.value}));return{checked:f,toggle:function(){i(f.value?u.value:a.value)},on:function(){i(a.value)},off:function(){i(u.value)}}}(n,0,{inputValue:r.inputValue,update:r.update});return{...r,...l,...a}}};var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"toggle-input",style:e.cssVars},[n("input",{attrs:{type:"checkbox",name:e.name,id:e.id,disabled:e.disabled,trueValue:e.trueValue,falseValue:e.falseValue},domProps:{checked:e.checked},on:{input:e.handleInput}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("on",[n("span",{staticClass:"toggle-on",domProps:{innerHTML:e._s(e.onLabel)}})]),e._v(" "),e._t("off",[n("span",{staticClass:"toggle-off",domProps:{innerHTML:e._s(e.offLabel)}})])],2)])};r._withStripped=!0;const l=n({render:r,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);export default l;
+import{toRefs as e,ref as t,computed as n}from"@vue/composition-api";function a(e,t,n,a,o,l,u,r,d,i){"boolean"!=typeof u&&(d=r,r=u,u=!1);var f,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,o&&(s.functional=!0)),a&&(s._scopeId=a),l?(f=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,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},s._ssrRegister=f):t&&(f=u?function(e){t.call(this,i(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),f)if(s.functional){var c=s.render;s.render=function(e,t){return f.call(t),c(e,t)}}else{var g=s.beforeCreate;s.beforeCreate=g?[].concat(g,f):[f]}return n}const o={name:"Toggle",emits:["input","update:modelValue","change"],props:{...{value:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1},modelValue:{validator:function(e){return e=>-1!==["number","string","boolean"].indexOf(typeof e)||null==e},required:!1}},id:{type:[String,Number],required:!1,default:"toggle"},name:{type:[String,Number],required:!1,default:"toggle"},disabled:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},offLabel:{type:[String,Object],required:!1,default:""},onLabel:{type:[String,Object],required:!1,default:""},width:{type:Number,required:!1,default:54},height:{type:Number,required:!1,default:24},speed:{type:Number,required:!1,default:300},colors:{type:Object,required:!1,default:()=>({})},fontSize:{type:String,required:!1,default:"13px"}},setup(a,o){const l=function(t,n,a){var o=e(t),l=o.value,u=o.modelValue,r=o.falseValue,d=o.trueValue,i=void 0!==n.expose?u:l,f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&f(r.value),-1!==[!0,1,"1","on"].indexOf(i.value)&&f(d.value),{inputValue:i,update:f,handleInput:function(e){f(e.target.checked?d.value:r.value)}}}(a,o),u=function(a,o,l){var u=e(a),r=u.width,d=u.height,i=u.speed,f=u.colors,s=u.fontSize,c=t({background:{on:"#41b883",off:"#d4e0e7",disabled:"#d4e0e7"},text:{on:"#ffffff",off:"#80878c",disabled:"#80878c"},handle:{on:"#ffffff",off:"#ffffff",disabled:"#f2faff"}}),g=n((function(){var e=Object.assign({},c.value);return f.value.background&&(e.background=Object.assign({},e.background,f.value.background)),f.value.text&&(e.text=Object.assign({},e.text,f.value.text)),f.value.handle&&(e.handle=Object.assign({},e.handle,f.value.handle)),e}));return{cssVars:n((function(){return{"--toggle-off-background":g.value.background.off,"--toggle-on-background":g.value.background.on,"--toggle-disabled-background":g.value.background.disabled,"--toggle-off-text-color":g.value.text.off,"--toggle-on-text-color":g.value.text.on,"--toggle-disabled-text-color":g.value.text.disabled,"--toggle-on-handle-color":g.value.handle.on,"--toggle-off-handle-color":g.value.handle.off,"--toggle-disabled-handle-color":g.value.handle.disabled,"--toggle-height":d.value+"px","--toggle-width":r.value+"px","--toggle-speed":i.value/1e3+"s","--toggle-radius":d.value/2+"px","--toggle-handle-size":d.value-6+"px","--toggle-handle-right-on":d.value-3+"px","--toggle-font-size":s.value}}))}}(a),r=function(t,a,o){var l=e(t),u=l.trueValue,r=l.falseValue,d=o.inputValue,i=o.update,f=n((function(){return d.value===u.value}));return{checked:f,toggle:function(){i(f.value?r.value:u.value)},on:function(){i(u.value)},off:function(){i(r.value)}}}(a,0,{inputValue:l.inputValue,update:l.update});return{...l,...u,...r}}};var l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"toggle-input",style:e.cssVars},[n("input",{attrs:{type:"checkbox",name:e.name,id:e.id,disabled:e.disabled,trueValue:e.trueValue,falseValue:e.falseValue},domProps:{checked:e.checked},on:{input:e.handleInput}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("on",[n("span",{staticClass:"toggle-on",domProps:{innerHTML:e._s(e.onLabel)}})]),e._v(" "),e._t("off",[n("span",{staticClass:"toggle-off",domProps:{innerHTML:e._s(e.offLabel)}})])],2)])};l._withStripped=!0;const u=a({render:l,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);export default u;

package.json

 {
   "name": "@vueform/toggle",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Vue 3 toggle component with labels, custom slots and styling options.",

README.md

@@ -127,10 +127,3 @@ <div align="center">
 | **speed** | `number` | `300` | The speed of toggle switch in `milliseconds`. |
-| **offBackground** | `string` | `#d4e0e7` | The color of background when toggle is `off`. |
-| **onBackground** | `string` | `#41b883` | The color of background when toggle is `on`. |
-| **disabledBackground** | `string` | `#d4e0e7` | The color of background when toggle is `disabled`. |
-| **offTextColor** | `string` | `#80878c` | The color of text when toggle is `off`. |
-| **onTextColor** | `string` | `#ffffff` | The color of text when toggle is `on`. |
-| **disabledTextColor** | `string` | `#80878c` | The color of text when toggle is `disabled`. |
-| **handleColor** | `string` | `#ffffff` | The background color of toggle handle. |
-| **disabledHandleColor** | `string` | `#f2faff` | The background color of toggle handle when toggle is `disabled`. |
+| **colors** | `object` |  | The colors of toggle. Default:<br/>`{`<br/>&nbsp;&nbsp;`background: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#41b883',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#d4e0e7',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#d4e0e7'`<br/>&nbsp;&nbsp;`},`<br/>&nbsp;&nbsp;`text: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#80878c',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#80878c'`<br/>&nbsp;&nbsp;`},`<br/>&nbsp;&nbsp;`handle: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#f2faff'`<br/>&nbsp;&nbsp;`}` |
 | **fontSize** | `string` | `13px` | The font size of toggle labels. |
@@ -137,0 +130,0 @@

src/composables/useStyle.js

@@ -1,20 +0,60 @@
-import { computed, toRefs } from 'composition-api'
+import { ref, computed, toRefs } from 'composition-api'
 
 export default function useStyle (props, context, dependencies)
 {
-  const { width, height, speed, offBackground, onBackground, disabledBackground, offTextColor,
-          onTextColor, disabledTextColor, fontSize, handleColor, disabledHandleColor, } = toRefs(props)
+  const { width, height, speed, colors, fontSize } = toRefs(props)
 
+  // ================ DATA ================
+
+  // no export
+  const defaultColors = ref({
+    background: {
+      on: '#41b883',
+      off: '#d4e0e7',
+      disabled: '#d4e0e7',
+    },
+    text: {
+      on: '#ffffff',
+      off: '#80878c',
+      disabled: '#80878c',
+    },
+    handle: {
+      on: '#ffffff',
+      off: '#ffffff',
+      disabled: '#f2faff',
+    },
+  })
+
   // ============== COMPUTED ==============
 
+  // no export
+  const cssColors = computed(() => {
+    let cssColors = Object.assign({}, defaultColors.value)
+
+    if (colors.value.background) {
+      cssColors.background = Object.assign({}, cssColors.background, colors.value.background)
+    }
+
+    if (colors.value.text) {
+      cssColors.text = Object.assign({}, cssColors.text, colors.value.text)
+    }
+
+    if (colors.value.handle) {
+      cssColors.handle = Object.assign({}, cssColors.handle, colors.value.handle)
+    }
+
+    return cssColors
+  })
+
   const cssVars = computed(() => {
     let cssVars = {
-      '--toggle-off-background': offBackground.value,
-      '--toggle-on-background': onBackground.value,
-      '--toggle-disabled-background': disabledBackground.value,
-      '--toggle-off-text-color': offTextColor.value,
-      '--toggle-on-text-color': onTextColor.value,
-      '--toggle-disabled-text-color': disabledTextColor.value,
-      '--toggle-handle-color': handleColor.value,
-      '--toggle-disabled-handle-color': disabledHandleColor.value,
+      '--toggle-off-background': cssColors.value.background.off,
+      '--toggle-on-background': cssColors.value.background.on,
+      '--toggle-disabled-background': cssColors.value.background.disabled,
+      '--toggle-off-text-color': cssColors.value.text.off,
+      '--toggle-on-text-color': cssColors.value.text.on,
+      '--toggle-disabled-text-color': cssColors.value.text.disabled,
+      '--toggle-on-handle-color': cssColors.value.handle.on,
+      '--toggle-off-handle-color': cssColors.value.handle.off,
+      '--toggle-disabled-handle-color': cssColors.value.handle.disabled,
       '--toggle-height': height.value + 'px',
@@ -21,0 +61,0 @@ '--toggle-width': width.value + 'px',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37456

increased by1.24%

Lines of code

183

increased by22%

Worsened metrics

Number of lines in readme file

209

decreased by-3.24%

No dependency changes