@vueform/toggle - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+## v1.0.1
+
+> `2020-01-06`
+
+### 🎉 Features
+  - Added `disabled` property
+
 ## v1.0.0
@@ -2,0 +9,0 @@

dist/toggle.global.js

@@ -1,1 +0,1 @@
-var VueformToggle=function(e,t){"use strict";var u={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"},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"},offTextColor:{type:String,required:!1,default:"#888888"},onTextColor:{type:String,required:!1,default:"#ffffff"},handleColor:{type:String,required:!1,default:"#ffffff"},fontSize:{type:String,required:!1,default:"13px"}},setup(t,u){const l=function(t,u,l){var n=e.toRefs(t),r=n.value,o=n.modelValue,a=n.falseValue,d=n.trueValue,i=void 0!==u.expose?o:r,f=function(e){u.emit("input",e),u.emit("update:modelValue",e),u.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,u),n=function(t,u,l){var n=e.toRefs(t),r=n.width,o=n.height,a=n.speed,d=n.offBackground,i=n.onBackground,f=n.offTextColor,g=n.onTextColor,c=n.fontSize,p=n.handleColor;return{cssVars:e.computed((function(){return{"--toggle-off-background":d.value,"--toggle-on-background":i.value,"--toggle-off-text-color":f.value,"--toggle-on-text-color":g.value,"--toggle-handle-color":p.value,"--toggle-height":o.value+"px","--toggle-width":r.value+"px","--toggle-speed":a.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":c.value}}))}}(t),r=function(t,u,l){var n=e.toRefs(t),r=n.trueValue,o=n.falseValue,a=l.inputValue,d=l.update,i=e.computed((function(){return a.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)}}}(t,0,{inputValue:l.inputValue,update:l.update});return{...l,...n,...r}}};return u.render=function(e,u,l,n,r,o){return t.openBlock(),t.createBlock("div",{class:"toggle-input",style:e.cssVars},[t.createVNode("input",{type:"checkbox",name:l.name,id:l.id,checked:e.checked,trueValue:l.trueValue,falseValue:l.falseValue,onInput:u[1]||(u[1]=(...t)=>e.handleInput&&e.handleInput(...t))},null,40,["name","id","checked","trueValue","falseValue"]),t.createVNode("label",{for:l.id},[t.renderSlot(e.$slots,"on",{},(()=>[t.createVNode("span",{class:"toggle-on",innerHTML:l.onLabel},null,8,["innerHTML"])])),t.renderSlot(e.$slots,"off",{},(()=>[t.createVNode("span",{class:"toggle-off",innerHTML:l.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},u.__file="src/Toggle.vue",u}(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},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);

dist/toggle.js

@@ -1,1 +0,1 @@
-import{toRefs as e,computed as u,openBlock as t,createBlock as l,createVNode as n,renderSlot as a}from"vue";var r={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"},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"},offTextColor:{type:String,required:!1,default:"#888888"},onTextColor:{type:String,required:!1,default:"#ffffff"},handleColor:{type:String,required:!1,default:"#ffffff"},fontSize:{type:String,required:!1,default:"13px"}},setup(t,l){const n=function(u,t,l){var n=e(u),a=n.value,r=n.modelValue,o=n.falseValue,i=n.trueValue,d=void 0!==t.expose?r:a,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(d.value)&&f(o.value),-1!==[!0,1,"1","on"].indexOf(d.value)&&f(i.value),{inputValue:d,update:f,handleInput:function(e){f(e.target.checked?i.value:o.value)}}}(t,l),a=function(t,l,n){var a=e(t),r=a.width,o=a.height,i=a.speed,d=a.offBackground,f=a.onBackground,g=a.offTextColor,p=a.onTextColor,c=a.fontSize,s=a.handleColor;return{cssVars:u((function(){return{"--toggle-off-background":d.value,"--toggle-on-background":f.value,"--toggle-off-text-color":g.value,"--toggle-on-text-color":p.value,"--toggle-handle-color":s.value,"--toggle-height":o.value+"px","--toggle-width":r.value+"px","--toggle-speed":i.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":c.value}}))}}(t),r=function(t,l,n){var a=e(t),r=a.trueValue,o=a.falseValue,i=n.inputValue,d=n.update,f=u((function(){return i.value===r.value}));return{checked:f,toggle:function(){d(f.value?o.value:r.value)},on:function(){d(r.value)},off:function(){d(o.value)}}}(t,0,{inputValue:n.inputValue,update:n.update});return{...n,...a,...r}}};r.render=function(e,u,r,o,i,d){return t(),l("div",{class:"toggle-input",style:e.cssVars},[n("input",{type:"checkbox",name:r.name,id:r.id,checked:e.checked,trueValue:r.trueValue,falseValue:r.falseValue,onInput:u[1]||(u[1]=(...u)=>e.handleInput&&e.handleInput(...u))},null,40,["name","id","checked","trueValue","falseValue"]),n("label",{for:r.id},[a(e.$slots,"on",{},(()=>[n("span",{class:"toggle-on",innerHTML:r.onLabel},null,8,["innerHTML"])])),a(e.$slots,"off",{},(()=>[n("span",{class:"toggle-off",innerHTML:r.offLabel},null,8,["innerHTML"])]))],8,["for"])],4)},r.__file="src/Toggle.vue";export default r;
+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;

dist/toggle.vue2.global.js

@@ -1,1 +0,1 @@
-var VueformToggle=function(e){"use strict";function t(e,t,n,o,u,r,a,l,i,d){"boolean"!=typeof a&&(i=l,l=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,u&&(s.functional=!0)),o&&(s._scopeId=o),r?(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,i(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},s._ssrRegister=f):t&&(f=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(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 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"},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"},offTextColor:{type:String,required:!1,default:"#888888"},onTextColor:{type:String,required:!1,default:"#ffffff"},handleColor:{type:String,required:!1,default:"#ffffff"},fontSize:{type:String,required:!1,default:"13px"}},setup(t,n){const o=function(t,n,o){var u=e.toRefs(t),r=u.value,a=u.modelValue,l=u.falseValue,i=u.trueValue,d=void 0!==n.expose?a:r,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(d.value)&&f(l.value),-1!==[!0,1,"1","on"].indexOf(d.value)&&f(i.value),{inputValue:d,update:f,handleInput:function(e){f(e.target.checked?i.value:l.value)}}}(t,n),u=function(t,n,o){var u=e.toRefs(t),r=u.width,a=u.height,l=u.speed,i=u.offBackground,d=u.onBackground,f=u.offTextColor,s=u.onTextColor,g=u.fontSize,p=u.handleColor;return{cssVars:e.computed((function(){return{"--toggle-off-background":i.value,"--toggle-on-background":d.value,"--toggle-off-text-color":f.value,"--toggle-on-text-color":s.value,"--toggle-handle-color":p.value,"--toggle-height":a.value+"px","--toggle-width":r.value+"px","--toggle-speed":l.value/1e3+"s","--toggle-radius":a.value/2+"px","--toggle-handle-size":a.value-6+"px","--toggle-handle-right-on":a.value-3+"px","--toggle-font-size":g.value}}))}}(t),r=function(t,n,o){var u=e.toRefs(t),r=u.trueValue,a=u.falseValue,l=o.inputValue,i=o.update,d=e.computed((function(){return l.value===r.value}));return{checked:d,toggle:function(){i(d.value?a.value:r.value)},on:function(){i(r.value)},off:function(){i(a.value)}}}(t,0,{inputValue:o.inputValue,update:o.update});return{...o,...u,...r}}};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,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,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);

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,u,a,l,i,d){"boolean"!=typeof a&&(i=l,l=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),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,i(e)),e&&e._registeredComponents&&e._registeredComponents.add(u)},s._ssrRegister=f):t&&(f=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),f)if(s.functional){var p=s.render;s.render=function(e,t){return f.call(t),p(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"},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"},offTextColor:{type:String,required:!1,default:"#888888"},onTextColor:{type:String,required:!1,default:"#ffffff"},handleColor:{type:String,required:!1,default:"#ffffff"},fontSize:{type:String,required:!1,default:"13px"}},setup(n,o){const r=function(t,n,o){var r=e(t),u=r.value,a=r.modelValue,l=r.falseValue,i=r.trueValue,d=void 0!==n.expose?a: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(d.value)&&f(l.value),-1!==[!0,1,"1","on"].indexOf(d.value)&&f(i.value),{inputValue:d,update:f,handleInput:function(e){f(e.target.checked?i.value:l.value)}}}(n,o),u=function(n,o,r){var u=e(n),a=u.width,l=u.height,i=u.speed,d=u.offBackground,f=u.onBackground,s=u.offTextColor,p=u.onTextColor,g=u.fontSize,c=u.handleColor;return{cssVars:t((function(){return{"--toggle-off-background":d.value,"--toggle-on-background":f.value,"--toggle-off-text-color":s.value,"--toggle-on-text-color":p.value,"--toggle-handle-color":c.value,"--toggle-height":l.value+"px","--toggle-width":a.value+"px","--toggle-speed":i.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":g.value}}))}}(n),a=function(n,o,r){var u=e(n),a=u.trueValue,l=u.falseValue,i=r.inputValue,d=r.update,f=t((function(){return i.value===a.value}));return{checked:f,toggle:function(){d(f.value?l.value:a.value)},on:function(){d(a.value)},off:function(){d(l.value)}}}(n,0,{inputValue:r.inputValue,update:r.update});return{...r,...u,...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,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 u=n({render:r,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);export default u;
+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;

package.json

 {
   "name": "@vueform/toggle",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
-  "description": "Vue 3 toggle component",
+  "description": "Vue 3 toggle component with labels, custom slots and styling options.",
   "license": "MIT",
@@ -7,0 +7,0 @@ "author": "Adam Berecz <[e-mail]>",

README.md

@@ -48,2 +48,7 @@ <div align="center">
 
+## Other libraries
+
+* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.
+* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with multihandles, tooltips merging and formatting.
+
 ## Toggle features
@@ -53,3 +58,3 @@
 * No dependencies
-* Lightweight (~1 kB gzipped)
+* Lightweight (<2 kB gzipped)
 * 100% coverage
@@ -63,3 +68,3 @@ * ESM support
 
-Check out our [demo](https://jsfiddle.net/p60t2bs4/).
+Check out our [demo](https://jsfiddle.net/p60t2bs4/2/).
 
@@ -117,2 +122,3 @@ ## Installation
 | **name** | `string` | `toggle` | The `name` attribute of input field. |
+| **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |
 | **falseValue** | `string\|number\|boolean` | `false` | The value when the toggle is `off`. |
@@ -127,5 +133,8 @@ | **trueValue** | `string\|number\|boolean` | `true` | The value when toggle is `on`. |
 | **onBackground** | `string` | `#41b883` | The color of background when toggle is `on`. |
-| **offTextColor** | `string` | `#888888` | The color of text when toggle is `off`. |
+| **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`. |
 | **fontSize** | `string` | `13px` | The font size of toggle labels. |
@@ -141,6 +150,6 @@
 
-| Slot | Attributes | Description |
-| --- | --- | --- |
-| **off** | | Rendered when the toggle is `off` (by default `offLabel`). |
-| **on** | | Rendered when the toggle is `on` (by default `onLabel`). |
+| Slot |  Description |
+| --- | --- |
+| **off** | Rendered when the toggle is `off` (by default `offLabel`). |
+| **on** | Rendered when the toggle is `on` (by default `onLabel`). |
 
@@ -151,3 +160,4 @@ ## Examples
 * [Toggle with labels](#toggle-with-labels)
-* [Toggle with custom styles](#toggle-with-custom-style)
+* [Toggle with custom values](#toggle-with-custom-values)
+* [Toggle with custom styles](#toggle-with-custom-styles)
 
@@ -162,3 +172,3 @@ ### Default toggle
 
-[JSFiddle - Example #1](https://jsfiddle.net/p60t2bs4/)
+[JSFiddle - Example #1](https://jsfiddle.net/p60t2bs4/2/)
 
@@ -170,11 +180,11 @@ ### Toggle with labels
   v-model="value"
+  id="example2"
   on-label="On"
   off-label="Off"
-  id="example2"
 />
 ```
 
-[JSFiddle - Example #2](https://jsfiddle.net/p60t2bs4/)
+[JSFiddle - Example #2](https://jsfiddle.net/p60t2bs4/2/)
 
-### Toggle with custom stylesg
+### Toggle with custom values
 
@@ -184,5 +194,18 @@ ``` vue
   v-model="value"
+  id="example3"
+  true-value="on"
+  false-value="off"
+/>
+```
+
+[JSFiddle - Example #3](https://jsfiddle.net/p60t2bs4/2/)
+
+### Toggle with custom styles
+
+``` vue
+<Toggle
+  v-model="value"
+  id="example4"
   font-size="15px"
   on-background="#35495e"
-  id="example3"
   :width="80"
@@ -194,3 +217,3 @@ :height="30"
 
-[JSFiddle - Example #3](https://jsfiddle.net/p60t2bs4/)
+[JSFiddle - Example #4](https://jsfiddle.net/p60t2bs4/2/)
 
@@ -197,0 +220,0 @@ ## About Vueform

src/composables/useStyle.js

@@ -5,4 +5,4 @@ import { computed, toRefs } from 'composition-api'
 {
-  const { width, height, speed, offBackground, onBackground, offTextColor,
-          onTextColor, fontSize, handleColor, } = toRefs(props)
+  const { width, height, speed, offBackground, onBackground, disabledBackground, offTextColor,
+          onTextColor, disabledTextColor, fontSize, handleColor, disabledHandleColor, } = toRefs(props)
 
@@ -15,5 +15,8 @@ // ============== COMPUTED ==============
       '--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-height': height.value + 'px',
@@ -20,0 +23,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

36997

increased by13.28%

Lines of code

150

increased by7.91%

Number of lines in readme file

216

increased by11.92%

No dependency changes