diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e8e390..f572f32 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## v2.0.1 + +> `2021-09-07` + +### 🐞 Bug Fixes + - Do not allow focus when disabled. + - Update classList when classes change. + - Default check/uncheck fix for opposite values [#3](https://github.com/vueform/toggle/issues/3). + ## v2.0.0 > `2021-06-03` @@ -7,6 +16,8 @@ - **BREAKING:** Completely updated `default` style and classnames. - Added `required`, `classes`, `labelledby`, `describedby` properties and `label` slot. +## v1.0.2 + > `2021-01-06` ### 🎉 Features diff --git a/dist/toggle.global.js b/dist/toggle.global.js index b78fe97..48e2dc0 100644 --- a/dist/toggle.global.js +++ b/dist/toggle.global.js @@ -1 +1 @@ -var VueformToggle=function(e,l){"use strict";function a(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}function t(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,t)}return a}function n(l,n,r){var c=e.toRefs(l),u=c.disabled.value,d=function(e){for(var l=1;l-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(l,a){const t=function(l,a,t){var n=e.toRefs(l),r=n.value,c=n.modelValue,u=n.falseValue,d=n.trueValue,o=n.disabled,i=void 0!==a.expose?c:r,s=e.computed((function(){return i.value===d.value})),f=function(e){a.emit("input",e),a.emit("update:modelValue",e),a.emit("change",e)},b=function(){f(d.value)},g=function(){f(u.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&i.value!==u.value&&g(),-1!==[!0,1,"1","on"].indexOf(i.value)&&i.value!==d.value&&b(),{externalValue:i,checked:s,update:f,check:b,uncheck:g,handleInput:function(e){f(e.target.checked?d.value:u.value)},handleClick:function(){o.value||(s.value?g():b())}}}(l,a),r=function(l,a,t){var n=e.toRefs(l),r=n.trueValue,c=n.falseValue,u=n.onLabel,d=n.offLabel,o=t.checked,i=t.update;return{label:e.computed((function(){var e=o.value?u.value:d.value;return e||(e=" "),e})),toggle:function(){i(o.value?c.value:r.value)},on:function(){i(r.value)},off:function(){i(c.value)}}}(l,0,{checked:t.checked,update:t.update}),c=n(l,0,{checked:t.checked}),u=(d={check:t.check,uncheck:t.uncheck,checked:t.checked},o=d.check,i=d.uncheck,s=d.checked,{handleSpace:function(){s.value?i():o()}});var d,o,i,s;return{...t,...c,...r,...u}}};return r.render=function(e,a,t,n,r,c){return l.openBlock(),l.createBlock("div",{class:e.classList.container,tabindex:t.disabled?-1:0,"aria-checked":e.checked,"aria-describedby":t.describedby,"aria-labelledby":t.labelledby,role:"switch",onKeyup:a[2]||(a[2]=l.withKeys(((...l)=>e.handleSpace&&e.handleSpace(...l)),["space"]))},[l.withDirectives(l.createVNode("input",{type:"checkbox",id:t.id,name:t.name,value:t.trueValue,checked:e.checked,disabled:t.disabled},null,8,["id","name","value","checked","disabled"]),[[l.vShow,!1]]),l.createVNode("div",{class:e.classList.toggle,onClick:a[1]||(a[1]=(...l)=>e.handleClick&&e.handleClick(...l))},[l.createVNode("span",{class:e.classList.handle},null,2),l.renderSlot(e.$slots,"label",{checked:e.checked,classList:e.classList},(()=>[l.createVNode("span",{class:e.classList.label,innerHTML:e.label},null,10,["innerHTML"])])),t.required?(l.openBlock(),l.createBlock("input",{key:0,type:"checkbox",style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},checked:e.checked,"aria-hidden":"true",tabindex:"-1",required:""},null,8,["checked"])):l.createCommentVNode("v-if",!0)],2)],42,["tabindex","aria-checked","aria-describedby","aria-labelledby"])},r.__file="src/Toggle.vue",r}(Vue,Vue); +var VueformToggle=function(e,l){"use strict";function a(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}function t(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,t)}return a}function n(l,n,u){var r=e.toRefs(l),c=r.disabled,d=u.checked,o=e.computed((function(){return function(e){for(var l=1;l-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(l,a){const t=function(l,a,t){var n=e.toRefs(l),u=n.value,r=n.modelValue,c=n.falseValue,d=n.trueValue,o=n.disabled,i=void 0!==a.expose?r:u,s=e.computed((function(){return i.value===d.value})),f=function(e){a.emit("input",e),a.emit("update:modelValue",e),a.emit("change",e)},b=function(){f(d.value)},g=function(){f(c.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(i.value)&&-1===[c.value,d.value].indexOf(i.value)&&g(),-1!==[!0,1,"1","on"].indexOf(i.value)&&-1===[c.value,d.value].indexOf(i.value)&&b(),{externalValue:i,checked:s,update:f,check:b,uncheck:g,handleInput:function(e){f(e.target.checked?d.value:c.value)},handleClick:function(){o.value||(s.value?g():b())}}}(l,a),u=function(l,a,t){var n=e.toRefs(l),u=n.trueValue,r=n.falseValue,c=n.onLabel,d=n.offLabel,o=t.checked,i=t.update;return{label:e.computed((function(){var e=o.value?c.value:d.value;return e||(e=" "),e})),toggle:function(){i(o.value?r.value:u.value)},on:function(){i(u.value)},off:function(){i(r.value)}}}(l,0,{checked:t.checked,update:t.update}),r=n(l,0,{checked:t.checked}),c=function(l,a,t){var n=e.toRefs(l).disabled,u=t.check,r=t.uncheck,c=t.checked;return{handleSpace:function(){n.value||(c.value?r():u())}}}(l,0,{check:t.check,uncheck:t.uncheck,checked:t.checked});return{...t,...r,...u,...c}}};return u.render=function(e,a,t,n,u,r){return l.openBlock(),l.createBlock("div",{class:e.classList.container,tabindex:t.disabled?void 0:0,"aria-checked":e.checked,"aria-describedby":t.describedby,"aria-labelledby":t.labelledby,role:"switch",onKeyup:a[2]||(a[2]=l.withKeys(((...l)=>e.handleSpace&&e.handleSpace(...l)),["space"]))},[l.withDirectives(l.createVNode("input",{type:"checkbox",id:t.id,name:t.name,value:t.trueValue,checked:e.checked,disabled:t.disabled},null,8,["id","name","value","checked","disabled"]),[[l.vShow,!1]]),l.createVNode("div",{class:e.classList.toggle,onClick:a[1]||(a[1]=(...l)=>e.handleClick&&e.handleClick(...l))},[l.createVNode("span",{class:e.classList.handle},null,2),l.renderSlot(e.$slots,"label",{checked:e.checked,classList:e.classList},(()=>[l.createVNode("span",{class:e.classList.label,innerHTML:e.label},null,10,["innerHTML"])])),t.required?(l.openBlock(),l.createBlock("input",{key:0,type:"checkbox",style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},checked:e.checked,"aria-hidden":"true",tabindex:"-1",required:""},null,8,["checked"])):l.createCommentVNode("v-if",!0)],2)],42,["tabindex","aria-checked","aria-describedby","aria-labelledby"])},u.__file="src/Toggle.vue",u}(Vue,Vue); diff --git a/dist/toggle.js b/dist/toggle.js index 5cf2956..73e85fe 100644 --- a/dist/toggle.js +++ b/dist/toggle.js @@ -1 +1 @@ -import{toRefs as e,computed as l,openBlock as a,createBlock as n,withKeys as t,withDirectives as r,createVNode as u,vShow as d,renderSlot as i,createCommentVNode as c}from"vue";function o(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);l&&(n=n.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,n)}return a}function s(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}function f(a,n,t){var r=e(a),u=r.disabled.value,d=function(e){for(var l=1;l-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(a,n){const t=function(a,n,t){var r=e(a),u=r.value,d=r.modelValue,i=r.falseValue,c=r.trueValue,o=r.disabled,s=void 0!==n.expose?d:u,f=l((function(){return s.value===c.value})),b=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)},g=function(){b(c.value)},h=function(){b(i.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(s.value)&&s.value!==i.value&&h(),-1!==[!0,1,"1","on"].indexOf(s.value)&&s.value!==c.value&&g(),{externalValue:s,checked:f,update:b,check:g,uncheck:h,handleInput:function(e){b(e.target.checked?c.value:i.value)},handleClick:function(){o.value||(f.value?h():g())}}}(a,n),r=function(a,n,t){var r=e(a),u=r.trueValue,d=r.falseValue,i=r.onLabel,c=r.offLabel,o=t.checked,s=t.update;return{label:l((function(){var e=o.value?i.value:c.value;return e||(e=" "),e})),toggle:function(){s(o.value?d.value:u.value)},on:function(){s(u.value)},off:function(){s(d.value)}}}(a,0,{checked:t.checked,update:t.update}),u=f(a,0,{checked:t.checked}),d=(i={check:t.check,uncheck:t.uncheck,checked:t.checked},c=i.check,o=i.uncheck,s=i.checked,{handleSpace:function(){s.value?o():c()}});var i,c,o,s;return{...t,...u,...r,...d}}};b.render=function(e,l,o,s,f,b){return a(),n("div",{class:e.classList.container,tabindex:o.disabled?-1:0,"aria-checked":e.checked,"aria-describedby":o.describedby,"aria-labelledby":o.labelledby,role:"switch",onKeyup:l[2]||(l[2]=t(((...l)=>e.handleSpace&&e.handleSpace(...l)),["space"]))},[r(u("input",{type:"checkbox",id:o.id,name:o.name,value:o.trueValue,checked:e.checked,disabled:o.disabled},null,8,["id","name","value","checked","disabled"]),[[d,!1]]),u("div",{class:e.classList.toggle,onClick:l[1]||(l[1]=(...l)=>e.handleClick&&e.handleClick(...l))},[u("span",{class:e.classList.handle},null,2),i(e.$slots,"label",{checked:e.checked,classList:e.classList},(()=>[u("span",{class:e.classList.label,innerHTML:e.label},null,10,["innerHTML"])])),o.required?(a(),n("input",{key:0,type:"checkbox",style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},checked:e.checked,"aria-hidden":"true",tabindex:"-1",required:""},null,8,["checked"])):c("v-if",!0)],2)],42,["tabindex","aria-checked","aria-describedby","aria-labelledby"])},b.__file="src/Toggle.vue";export default b; +import{toRefs as e,computed as l,openBlock as a,createBlock as n,withKeys as t,withDirectives as u,createVNode as r,vShow as d,renderSlot as i,createCommentVNode as c}from"vue";function o(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);l&&(n=n.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,n)}return a}function f(e,l,a){return l in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}function s(a,n,t){var u=e(a),r=u.disabled,d=t.checked,i=l((function(){return function(e){for(var l=1;l-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(a,n){const t=function(a,n,t){var u=e(a),r=u.value,d=u.modelValue,i=u.falseValue,c=u.trueValue,o=u.disabled,f=void 0!==n.expose?d:r,s=l((function(){return f.value===c.value})),b=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)},g=function(){b(c.value)},v=function(){b(i.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(f.value)&&-1===[i.value,c.value].indexOf(f.value)&&v(),-1!==[!0,1,"1","on"].indexOf(f.value)&&-1===[i.value,c.value].indexOf(f.value)&&g(),{externalValue:f,checked:s,update:b,check:g,uncheck:v,handleInput:function(e){b(e.target.checked?c.value:i.value)},handleClick:function(){o.value||(s.value?v():g())}}}(a,n),u=function(a,n,t){var u=e(a),r=u.trueValue,d=u.falseValue,i=u.onLabel,c=u.offLabel,o=t.checked,f=t.update;return{label:l((function(){var e=o.value?i.value:c.value;return e||(e=" "),e})),toggle:function(){f(o.value?d.value:r.value)},on:function(){f(r.value)},off:function(){f(d.value)}}}(a,0,{checked:t.checked,update:t.update}),r=s(a,0,{checked:t.checked}),d=function(l,a,n){var t=e(l).disabled,u=n.check,r=n.uncheck,d=n.checked;return{handleSpace:function(){t.value||(d.value?r():u())}}}(a,0,{check:t.check,uncheck:t.uncheck,checked:t.checked});return{...t,...r,...u,...d}}};b.render=function(e,l,o,f,s,b){return a(),n("div",{class:e.classList.container,tabindex:o.disabled?void 0:0,"aria-checked":e.checked,"aria-describedby":o.describedby,"aria-labelledby":o.labelledby,role:"switch",onKeyup:l[2]||(l[2]=t(((...l)=>e.handleSpace&&e.handleSpace(...l)),["space"]))},[u(r("input",{type:"checkbox",id:o.id,name:o.name,value:o.trueValue,checked:e.checked,disabled:o.disabled},null,8,["id","name","value","checked","disabled"]),[[d,!1]]),r("div",{class:e.classList.toggle,onClick:l[1]||(l[1]=(...l)=>e.handleClick&&e.handleClick(...l))},[r("span",{class:e.classList.handle},null,2),i(e.$slots,"label",{checked:e.checked,classList:e.classList},(()=>[r("span",{class:e.classList.label,innerHTML:e.label},null,10,["innerHTML"])])),o.required?(a(),n("input",{key:0,type:"checkbox",style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},checked:e.checked,"aria-hidden":"true",tabindex:"-1",required:""},null,8,["checked"])):c("v-if",!0)],2)],42,["tabindex","aria-checked","aria-describedby","aria-labelledby"])},b.__file="src/Toggle.vue";export default b; diff --git a/dist/toggle.vue2.global.js b/dist/toggle.vue2.global.js index dd914d9..c4a4684 100644 --- a/dist/toggle.vue2.global.js +++ b/dist/toggle.vue2.global.js @@ -1 +1 @@ -var VueformToggle=function(e){"use strict";function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function a(a,l,r){var o=e.toRefs(a),i=o.disabled.value,d=function(e){for(var a=1;a-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(t,n){const l=function(t,n,a){var l=e.toRefs(t),r=l.value,o=l.modelValue,i=l.falseValue,d=l.trueValue,u=l.disabled,c=void 0!==n.expose?o:r,s=e.computed((function(){return c.value===d.value})),f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)},g=function(){f(d.value)},b=function(){f(i.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(c.value)&&c.value!==i.value&&b(),-1!==[!0,1,"1","on"].indexOf(c.value)&&c.value!==d.value&&g(),{externalValue:c,checked:s,update:f,check:g,uncheck:b,handleInput:function(e){f(e.target.checked?d.value:i.value)},handleClick:function(){u.value||(s.value?b():g())}}}(t,n),r=function(t,n,a){var l=e.toRefs(t),r=l.trueValue,o=l.falseValue,i=l.onLabel,d=l.offLabel,u=a.checked,c=a.update;return{label:e.computed((function(){var e=u.value?i.value:d.value;return e||(e=" "),e})),toggle:function(){c(u.value?o.value:r.value)},on:function(){c(r.value)},off:function(){c(o.value)}}}(t,0,{checked:l.checked,update:l.update}),o=a(t,0,{checked:l.checked}),i=(d={check:l.check,uncheck:l.uncheck,checked:l.checked},u=d.check,c=d.uncheck,s=d.checked,{handleSpace:function(){s.value?c():u()}});var d,u,c,s;return{...l,...o,...r,...i}}};var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classList.container,attrs:{tabindex:e.disabled?-1:0,"aria-checked":e.checked,"aria-describedby":e.describedby,"aria-labelledby":e.labelledby,role:"switch"},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])?null:e.handleSpace(t)}}},[n("input",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{type:"checkbox",id:e.id,name:e.name,disabled:e.disabled},domProps:{value:e.trueValue,checked:e.checked}}),e._v(" "),n("div",{class:e.classList.toggle,on:{click:e.handleClick}},[n("span",{class:e.classList.handle}),e._v(" "),e._t("label",[n("span",{class:e.classList.label,domProps:{innerHTML:e._s(e.label)}})],{checked:e.checked,classList:e.classList}),e._v(" "),e.required?n("input",{style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},attrs:{type:"checkbox","aria-hidden":"true",tabindex:"-1",required:""},domProps:{checked:e.checked}}):e._e()],2)])};o._withStripped=!0;return l({render:o,staticRenderFns:[]},undefined,r,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI); +var VueformToggle=function(e){"use strict";function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function a(a,l,r){var o=e.toRefs(a),u=o.disabled,i=r.checked,d=e.computed((function(){return function(e){for(var a=1;a-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(t,n){const l=function(t,n,a){var l=e.toRefs(t),r=l.value,o=l.modelValue,u=l.falseValue,i=l.trueValue,d=l.disabled,c=void 0!==n.expose?o:r,s=e.computed((function(){return c.value===i.value})),f=function(e){n.emit("input",e),n.emit("update:modelValue",e),n.emit("change",e)},g=function(){f(i.value)},b=function(){f(u.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(c.value)&&-1===[u.value,i.value].indexOf(c.value)&&b(),-1!==[!0,1,"1","on"].indexOf(c.value)&&-1===[u.value,i.value].indexOf(c.value)&&g(),{externalValue:c,checked:s,update:f,check:g,uncheck:b,handleInput:function(e){f(e.target.checked?i.value:u.value)},handleClick:function(){d.value||(s.value?b():g())}}}(t,n),r=function(t,n,a){var l=e.toRefs(t),r=l.trueValue,o=l.falseValue,u=l.onLabel,i=l.offLabel,d=a.checked,c=a.update;return{label:e.computed((function(){var e=d.value?u.value:i.value;return e||(e=" "),e})),toggle:function(){c(d.value?o.value:r.value)},on:function(){c(r.value)},off:function(){c(o.value)}}}(t,0,{checked:l.checked,update:l.update}),o=a(t,0,{checked:l.checked}),u=function(t,n,a){var l=e.toRefs(t).disabled,r=a.check,o=a.uncheck,u=a.checked;return{handleSpace:function(){l.value||(u.value?o():r())}}}(t,0,{check:l.check,uncheck:l.uncheck,checked:l.checked});return{...l,...o,...r,...u}}};var o=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classList.container,attrs:{tabindex:e.disabled?void 0:0,"aria-checked":e.checked,"aria-describedby":e.describedby,"aria-labelledby":e.labelledby,role:"switch"},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])?null:e.handleSpace(t)}}},[n("input",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{type:"checkbox",id:e.id,name:e.name,disabled:e.disabled},domProps:{value:e.trueValue,checked:e.checked}}),e._v(" "),n("div",{class:e.classList.toggle,on:{click:e.handleClick}},[n("span",{class:e.classList.handle}),e._v(" "),e._t("label",[n("span",{class:e.classList.label,domProps:{innerHTML:e._s(e.label)}})],{checked:e.checked,classList:e.classList}),e._v(" "),e.required?n("input",{style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},attrs:{type:"checkbox","aria-hidden":"true",tabindex:"-1",required:""},domProps:{checked:e.checked}}):e._e()],2)])};o._withStripped=!0;return l({render:o,staticRenderFns:[]},undefined,r,undefined,false,undefined,!1,void 0,void 0,void 0)}(VueCompositionAPI); diff --git a/dist/toggle.vue2.js b/dist/toggle.vue2.js index 646a2de..5d06fc5 100644 --- a/dist/toggle.vue2.js +++ b/dist/toggle.vue2.js @@ -1 +1 @@ -import{toRefs as e,computed as t}from"@vue/composition-api";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(l,r,o){var i=e(l),d=i.disabled.value,u=function(e){for(var t=1;t-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(n,a){const r=function(n,a,l){var r=e(n),o=r.value,i=r.modelValue,d=r.falseValue,u=r.trueValue,c=r.disabled,s=void 0!==a.expose?i:o,f=t((function(){return s.value===u.value})),g=function(e){a.emit("input",e),a.emit("update:modelValue",e),a.emit("change",e)},b=function(){g(u.value)},p=function(){g(d.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(s.value)&&s.value!==d.value&&p(),-1!==[!0,1,"1","on"].indexOf(s.value)&&s.value!==u.value&&b(),{externalValue:s,checked:f,update:g,check:b,uncheck:p,handleInput:function(e){g(e.target.checked?u.value:d.value)},handleClick:function(){c.value||(f.value?p():b())}}}(n,a),o=function(n,a,l){var r=e(n),o=r.trueValue,i=r.falseValue,d=r.onLabel,u=r.offLabel,c=l.checked,s=l.update;return{label:t((function(){var e=c.value?d.value:u.value;return e||(e=" "),e})),toggle:function(){s(c.value?i.value:o.value)},on:function(){s(o.value)},off:function(){s(i.value)}}}(n,0,{checked:r.checked,update:r.update}),i=l(n,0,{checked:r.checked}),d=(u={check:r.check,uncheck:r.uncheck,checked:r.checked},c=u.check,s=u.uncheck,f=u.checked,{handleSpace:function(){f.value?s():c()}});var u,c,s,f;return{...r,...i,...o,...d}}};var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classList.container,attrs:{tabindex:e.disabled?-1:0,"aria-checked":e.checked,"aria-describedby":e.describedby,"aria-labelledby":e.labelledby,role:"switch"},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"space",32,t.key,[" ","Spacebar"])?null:e.handleSpace(t)}}},[n("input",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{type:"checkbox",id:e.id,name:e.name,disabled:e.disabled},domProps:{value:e.trueValue,checked:e.checked}}),e._v(" "),n("div",{class:e.classList.toggle,on:{click:e.handleClick}},[n("span",{class:e.classList.handle}),e._v(" "),e._t("label",[n("span",{class:e.classList.label,domProps:{innerHTML:e._s(e.label)}})],{checked:e.checked,classList:e.classList}),e._v(" "),e.required?n("input",{style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},attrs:{type:"checkbox","aria-hidden":"true",tabindex:"-1",required:""},domProps:{checked:e.checked}}):e._e()],2)])};i._withStripped=!0;const d=r({render:i,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);export default d; +import{toRefs as e,computed as n}from"@vue/composition-api";function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(l,r,o){var i=e(l),u=i.disabled,d=o.checked,c=n((function(){return function(e){for(var n=1;n-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},required:{type:Boolean,required:!1,default:!1},falseValue:{type:[String,Number,Boolean],required:!1,default:!1},trueValue:{type:[String,Number,Boolean],required:!1,default:!0},onLabel:{type:[String,Object],required:!1,default:""},offLabel:{type:[String,Object],required:!1,default:""},classes:{type:Object,required:!1,default:()=>({})},labelledby:{type:String,required:!1},describedby:{type:String,required:!1}},setup(t,a){const r=function(t,a,l){var r=e(t),o=r.value,i=r.modelValue,u=r.falseValue,d=r.trueValue,c=r.disabled,s=void 0!==a.expose?i:o,f=n((function(){return s.value===d.value})),b=function(e){a.emit("input",e),a.emit("update:modelValue",e),a.emit("change",e)},g=function(){b(d.value)},v=function(){b(u.value)};return-1!==[null,void 0,!1,0,"0","off"].indexOf(s.value)&&-1===[u.value,d.value].indexOf(s.value)&&v(),-1!==[!0,1,"1","on"].indexOf(s.value)&&-1===[u.value,d.value].indexOf(s.value)&&g(),{externalValue:s,checked:f,update:b,check:g,uncheck:v,handleInput:function(e){b(e.target.checked?d.value:u.value)},handleClick:function(){c.value||(f.value?v():g())}}}(t,a),o=function(t,a,l){var r=e(t),o=r.trueValue,i=r.falseValue,u=r.onLabel,d=r.offLabel,c=l.checked,s=l.update;return{label:n((function(){var e=c.value?u.value:d.value;return e||(e=" "),e})),toggle:function(){s(c.value?i.value:o.value)},on:function(){s(o.value)},off:function(){s(i.value)}}}(t,0,{checked:r.checked,update:r.update}),i=l(t,0,{checked:r.checked}),u=function(n,t,a){var l=e(n).disabled,r=a.check,o=a.uncheck,i=a.checked;return{handleSpace:function(){l.value||(i.value?o():r())}}}(t,0,{check:r.check,uncheck:r.uncheck,checked:r.checked});return{...r,...i,...o,...u}}};var i=function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{class:e.classList.container,attrs:{tabindex:e.disabled?void 0:0,"aria-checked":e.checked,"aria-describedby":e.describedby,"aria-labelledby":e.labelledby,role:"switch"},on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"space",32,n.key,[" ","Spacebar"])?null:e.handleSpace(n)}}},[t("input",{directives:[{name:"show",rawName:"v-show",value:!1,expression:"false"}],attrs:{type:"checkbox",id:e.id,name:e.name,disabled:e.disabled},domProps:{value:e.trueValue,checked:e.checked}}),e._v(" "),t("div",{class:e.classList.toggle,on:{click:e.handleClick}},[t("span",{class:e.classList.handle}),e._v(" "),e._t("label",[t("span",{class:e.classList.label,domProps:{innerHTML:e._s(e.label)}})],{checked:e.checked,classList:e.classList}),e._v(" "),e.required?t("input",{style:{appearance:"none",height:"1px",margin:"0",padding:"0",fontSize:"0",background:"transparent",position:"absolute",width:"100%",bottom:"0",outline:"none"},attrs:{type:"checkbox","aria-hidden":"true",tabindex:"-1",required:""},domProps:{checked:e.checked}}):e._e()],2)])};i._withStripped=!0;const u=r({render:i,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);export default u; diff --git a/package.json b/package.json index 30a340b..cb748b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vueform/toggle", - "version": "2.0.0", + "version": "2.0.1", "private": false, "description": "Vue 3 toggle component with labels, custom slots and styling options.", "license": "MIT",