@vueform/toggle - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

postcss.config.js

+module.exports = {}

src/composables/useClasses.js

+import { ref, computed, toRefs } from 'composition-api'
+
+export default function useStyle (props, context, dependencies)
+{
+  const refs = toRefs(props)
+  const disabled = refs.disabled.value
+  const classes = {
+    container: 'toggle-container',
+    toggle: 'toggle',
+    toggleOn: 'toggle-on',
+    toggleOff: 'toggle-off',
+    toggleOnDisabled: 'toggle-on-disabled',
+    toggleOffDisabled: 'toggle-off-disabled',
+    handle: 'toggle-handle',
+    handleOn: 'toggle-handle-on',
+    handleOff: 'toggle-handle-off',
+    handleOnDisabled: 'toggle-handle-on-disabled',
+    handleOffDisabled: 'toggle-handle-off-disabled',
+    label: 'toggle-label',
+    ...refs.classes.value,
+  }
+
+  // ============ DEPENDENCIES ============
+
+  const checked = dependencies.checked
+
+  // ============== COMPUTED ==============
+
+  const classList = computed(() => {
+    return {
+      container: classes.container,
+      toggle: [
+        classes.toggle,
+        disabled
+          ? (checked.value ? classes.toggleOnDisabled : classes.toggleOffDisabled)
+          : (checked.value ? classes.toggleOn : classes.toggleOff)
+      ],
+      handle: [
+        classes.handle,
+        disabled
+          ? (checked.value ? classes.handleOnDisabled : classes.handleOffDisabled)
+          : (checked.value ? classes.handleOn : classes.handleOff)
+      ],
+      label: classes.label,
+    }
+  })
+
+  return {
+    classList,
+  }
+}

src/composables/useKeyboard.js

+import { ref, computed, toRefs } from 'composition-api'
+
+export default function useStyle (props, context, dependencies)
+{
+  // ============ DEPENDENCIES ============
+
+  const check = dependencies.check
+  const uncheck = dependencies.uncheck
+  const checked = dependencies.checked
+
+  // =============== METHODS ==============
+
+  const handleSpace = () => {
+    checked.value ? uncheck() : check()
+  }
+
+  return {
+    handleSpace,
+  }
+}

src/index.d.ts

+export * from './Toggle';

src/Toggle.d.ts

+import Vue,{ VNode } from 'vue';
+
+declare class Toggle extends Vue {
+    modelValue?: any;
+    value?: any;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    falseValue?: any;
+    trueValue?: any;
+    offLabel?: string;
+    onLabel?: string;
+    labelledby?: string;
+    describedby?: string;
+    classes?: any[];
+
+    $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
+
+    $slots: {
+      label: VNode[];
+    };
+}
+
+export default Toggle;

CHANGELOG.md

@@ -1,6 +0,13 @@
-## v1.1.0
+## v2.0.0
 
-> `2020-01-06`
+> `2021-06-03`
 
 ### 🎉 Features
+  - **BREAKING:** Removed `width`, `height`, `speed`, `colors`, `fontSize` properties and `off`, `on` slots.
+  - **BREAKING:** Completely updated `default` style and classnames.
+  - Added `required`, `classes`, `labelledby`, `describedby` properties and `label` slot.
+
+> `2021-01-06`
+
+### 🎉 Features
   - **BREAKING:** Restructured `colors` property
@@ -10,3 +17,3 @@
 
-> `2020-01-06`
+> `2021-01-06`
 
@@ -18,5 +25,5 @@ ### 🎉 Features
 
-> `2020-01-05`
+> `2021-01-05`
 
 ### 🎉 Features
   - First release

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},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);
+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<arguments.length;l++){var n=null!=arguments[l]?arguments[l]:{};l%2?t(Object(n),!0).forEach((function(l){a(e,l,n[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(n,l))}))}return e}({container:"toggle-container",toggle:"toggle",toggleOn:"toggle-on",toggleOff:"toggle-off",toggleOnDisabled:"toggle-on-disabled",toggleOffDisabled:"toggle-off-disabled",handle:"toggle-handle",handleOn:"toggle-handle-on",handleOff:"toggle-handle-off",handleOnDisabled:"toggle-handle-on-disabled",handleOffDisabled:"toggle-handle-off-disabled",label:"toggle-label"},c.classes.value),o=r.checked;return{classList:e.computed((function(){return{container:d.container,toggle:[d.toggle,u?o.value?d.toggleOnDisabled:d.toggleOffDisabled:o.value?d.toggleOn:d.toggleOff],handle:[d.handle,u?o.value?d.handleOnDisabled:d.handleOffDisabled:o.value?d.handleOn:d.handleOff],label:d.label}}))}}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"},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="&nbsp;"),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);

dist/toggle.js

@@ -1,1 +0,1 @@
-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;
+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<arguments.length;l++){var a=null!=arguments[l]?arguments[l]:{};l%2?o(Object(a),!0).forEach((function(l){s(e,l,a[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))}))}return e}({container:"toggle-container",toggle:"toggle",toggleOn:"toggle-on",toggleOff:"toggle-off",toggleOnDisabled:"toggle-on-disabled",toggleOffDisabled:"toggle-off-disabled",handle:"toggle-handle",handleOn:"toggle-handle-on",handleOff:"toggle-handle-off",handleOnDisabled:"toggle-handle-on-disabled",handleOffDisabled:"toggle-handle-off-disabled",label:"toggle-label"},r.classes.value),i=t.checked;return{classList:l((function(){return{container:d.container,toggle:[d.toggle,u?i.value?d.toggleOnDisabled:d.toggleOffDisabled:i.value?d.toggleOn:d.toggleOff],handle:[d.handle,u?i.value?d.handleOnDisabled:d.handleOffDisabled:i.value?d.handleOn:d.handleOff],label:d.label}}))}}var b={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},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="&nbsp;"),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;

dist/toggle.vue2.global.js

@@ -1,1 +0,1 @@
-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);
+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<arguments.length;a++){var l=null!=arguments[a]?arguments[a]:{};a%2?n(Object(l),!0).forEach((function(n){t(e,n,l[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):n(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}({container:"toggle-container",toggle:"toggle",toggleOn:"toggle-on",toggleOff:"toggle-off",toggleOnDisabled:"toggle-on-disabled",toggleOffDisabled:"toggle-off-disabled",handle:"toggle-handle",handleOn:"toggle-handle-on",handleOff:"toggle-handle-off",handleOnDisabled:"toggle-handle-on-disabled",handleOffDisabled:"toggle-handle-off-disabled",label:"toggle-label"},o.classes.value),u=r.checked;return{classList:e.computed((function(){return{container:d.container,toggle:[d.toggle,i?u.value?d.toggleOnDisabled:d.toggleOffDisabled:u.value?d.toggleOn:d.toggleOff],handle:[d.handle,i?u.value?d.handleOnDisabled:d.handleOffDisabled:u.value?d.handleOn:d.handleOff],label:d.label}}))}}function l(e,t,n,a,l,r,o,i,d,u){"boolean"!=typeof o&&(d=i,i=o,o=!1);var c,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,l&&(s.functional=!0)),a&&(s._scopeId=a),r?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},s._ssrRegister=c):t&&(c=o?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),c)if(s.functional){var f=s.render;s.render=function(e,t){return c.call(t),f(e,t)}}else{var g=s.beforeCreate;s.beforeCreate=g?[].concat(g,c):[c]}return n}const 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"},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="&nbsp;"),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);

dist/toggle.vue2.js

@@ -1,1 +0,1 @@
-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;
+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<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?n(Object(l),!0).forEach((function(t){a(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):n(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}({container:"toggle-container",toggle:"toggle",toggleOn:"toggle-on",toggleOff:"toggle-off",toggleOnDisabled:"toggle-on-disabled",toggleOffDisabled:"toggle-off-disabled",handle:"toggle-handle",handleOn:"toggle-handle-on",handleOff:"toggle-handle-off",handleOnDisabled:"toggle-handle-on-disabled",handleOffDisabled:"toggle-handle-off-disabled",label:"toggle-label"},i.classes.value),c=o.checked;return{classList:t((function(){return{container:u.container,toggle:[u.toggle,d?c.value?u.toggleOnDisabled:u.toggleOffDisabled:c.value?u.toggleOn:u.toggleOff],handle:[u.handle,d?c.value?u.handleOnDisabled:u.handleOffDisabled:c.value?u.handleOn:u.handleOff],label:u.label}}))}}function r(e,t,n,a,l,r,o,i,d,u){"boolean"!=typeof o&&(d=i,i=o,o=!1);var c,s="function"==typeof n?n.options:n;if(e&&e.render&&(s.render=e.render,s.staticRenderFns=e.staticRenderFns,s._compiled=!0,l&&(s.functional=!0)),a&&(s._scopeId=a),r?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},s._ssrRegister=c):t&&(c=o?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,i(e))}),c)if(s.functional){var f=s.render;s.render=function(e,t){return c.call(t),f(e,t)}}else{var g=s.beforeCreate;s.beforeCreate=g?[].concat(g,c):[c]}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},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="&nbsp;"),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;

package.json

 {
   "name": "@vueform/toggle",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "private": false,
-  "description": "Vue 3 toggle component with labels, custom slots and styling options.",
+  "description": "Vue 3 toggle component with Tailwind support.",
   "license": "MIT",
   "author": "Adam Berecz <[e-mail]>",
   "main": "./dist/toggle.js",
+  "types": "./src/index.d.ts",
   "module": "./dist/toggle.js",
@@ -10,0 +11,0 @@ "unpkg": "./dist/toggle.global.js",

README.md

@@ -24,3 +24,3 @@ <div align="center">
 
-  <h1>Vue 3 Toggle</h1>
+  <h1>Vue 3 Toggle with Tailwind support</h1>
   
@@ -57,8 +57,10 @@ <a href="https://vueform.com?ref=github" target="_blank">
 * Vue 2 & 3 support
+* Tailwind & utility class support
 * No dependencies
 * Lightweight (<2 kB gzipped)
 * 100% coverage
+* TypeScript support
+* Accessibility support
 * ESM support
-* Fully configurable
-* Dynamic styles
+* Configrable styles via CSS vars
 * On / Off labels
@@ -68,3 +70,3 @@
 
-Check out our [demo](https://jsfiddle.net/p60t2bs4/2/).
+Check out our [demo](https://jsfiddle.net/4ckev9rx/).
 
@@ -104,10 +106,145 @@ ## Installation
 
-## Usage with Vue 2
+## Using with Vue 2
 
-When using with Vue 2 make sure to install [@vue/composition-api](https://github.com/vuejs/composition-api#npm) first and change the imported module to:
+When using Vue 2 install [@vue/composition-api](https://github.com/vuejs/composition-api#npm) via npm/yarn first:
 
+``` bash
+npm i @vue/composition-api --save-dev
+```
+
+Then install the plugin for Vue:
+
 ``` js
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+
+Vue.use(VueCompositionAPI)
+```
+
+After that make sure to change the imported Toggle module to:
+
+``` js
 import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
 ```
 
+## Using with Nuxt.js
+
+First you need install [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/getting-started/setup):
+
+``` bash
+npm i @nuxtjs/composition-api --save-dev
+```
+
+Then you need to enable it as a module in `nuxt.config.js`:
+
+``` js
+{
+  buildModules: [
+    '@nuxtjs/composition-api'
+  ]
+}
+```
+
+After that make sure to change the imported module to Vue 2 version of Toggle, as Nuxt.js still depends on that:
+
+``` js
+import Toggle from '@vueform/toggle/dist/toggle.vue2.js'
+```
+
+## Styling with CSS vars
+
+The following CSS variables can be used to customize the toggle button when using `default.css`:
+``` CSS
+var(--toggle-width, 3rem);
+var(--toggle-height, 1.25rem);
+var(--toggle-border, 0.125rem) solid;
+var(--toggle-font-size, 0.75rem);
+var(--toggle-duration, 150ms);
+var(--toggle-bg-on, #10b981);
+var(--toggle-bg-off, #e5e7eb);
+var(--toggle-bg-on-disabled, #d1d5db);
+var(--toggle-bg-off-disabled, #e5e7eb);
+var(--toggle-border-on, #10b981);
+var(--toggle-border-off, #e5e7eb);
+var(--toggle-border-on-disabled, #d1d5db);
+var(--toggle-border-off-disabled, #e5e7eb);
+var(--toggle-text-on, #ffffff);
+var(--toggle-text-off, #374151);
+var(--toggle-text-on-disabled, #9ca3af);
+var(--toggle-text-off-disabled, #9ca3af);
+var(--toggle-handle-enabled, #ffffff);
+var(--toggle-handle-disabled, #f3f4f6);
+```
+
+You might override them globally:
+
+``` css
+:root {
+  --toggle-bg-on: red;
+  --toggle-border-on: red;
+}
+```
+
+Or on an instance level:
+
+``` vue
+<Toggle v-model="value" class="my-toggle-red" />
+<Toggle v-model="value" class="my-toggle-blue" />
+```
+
+``` css
+.my-toggle-red {
+  --toggle-bg-on: red;
+  --toggle-border-on: red;
+}
+
+.my-toggle-blue {
+  --toggle-bg-on: blue;
+  --toggle-border-on: blue;
+}
+```
+
+## Styling with Tailwind CSS
+
+The `Toggle` component accepts a `classes` property where you can override default class names. In this case you don't need to required `default.css`. Here's a default styling for Tailwind CSS:
+
+``` vue
+<Toggle v-model="value" :classes="{
+  container: 'inline-block',
+  toggle: 'flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none',
+  toggleOn: 'bg-green-500 border-green-500 justify-start text-white',
+  toggleOff: 'bg-gray-200 border-gray-200 justify-end text-gray-700',
+  toggleOnDisabled: 'bg-gray-300 border-gray-300 justify-start text-gray-400 cursor-not-allowed',
+  toggleOffDisabled: 'bg-gray-200 border-gray-200 justify-end text-gray-400 cursor-not-allowed',
+  handle: 'inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all',
+  handleOn: 'left-full transform -translate-x-full',
+  handleOff: 'left-0',
+  handleOnDisabled: 'bg-gray-100 left-full transform -translate-x-full',
+  handleOffDisabled: 'bg-gray-100 left-0',
+  label: 'text-center w-8 border-box whitespace-nowrap select-none',
+}" />
+```
+
+If the button is **enabled** and **on** the `toggle` and `toggleOn` classes will be added to the toggle div:
+ ```flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none bg-green-500 border-green-500 justify-start text-white```
+
+Likewise if the the button is **disabled** and **on** the `toggle` and `toggleOnDisabled` classes will be added:
+ ```flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none bg-gray-300 border-gray-300 justify-start text-gray-400 cursor-not-allowed```
+
+The same is true `off` states and `handle`.
+
+This way you can customize the parts of the toggle button without having to worry about over-riding the same type of utility classes, like backgrounds or text colors.
+
+## Accessibility
+
+By default the `on` and `off` labels are being read by the screenreaders. If you provide the `labelledby` property that will be read instead of the labels. You might also add a `describedby` property to provide further description.
+
+``` vue
+<div>
+  <label id="toggle-label">Turn on notifications</label>
+  <Toggle v-model="value" labelledby="toggle-label" describedby="toggle-description" />
+</div>
+<small id="toggle-description">Turn this on if you'd like to receive in-app notifications.</small>
+```
+
 ## Support
@@ -124,2 +261,3 @@
 | **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |
+| **required** | `boolean` | `false` | Whether the HTML5 required attribute should be used for toggle (using an invisible fake input). |
 | **falseValue** | `string\|number\|boolean` | `false` | The value when the toggle is `off`. |
@@ -129,7 +267,5 @@ | **trueValue** | `string\|number\|boolean` | `true` | The value when toggle is `on`. |
 | **onLabel** | `string` | | The label when toggle is `on`. |
-| **width** | `number` | `54` | The width of the toggle in `px`. |
-| **height** | `number` | `24` | The height of the toggle in `px`. |
-| **speed** | `number` | `300` | The speed of toggle switch in `milliseconds`. |
-| **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. |
+| **labelledby** | `string` | | The `aria-labelledby` attribute. |
+| **describedby** | `string` | | The `aria-describedby` attribute. |
+| **classes** | `object` | | The object of classes to be applied for different parts of the toggle. Default: `{`<br>&nbsp;&nbsp;`container: 'toggle-container',`<br>&nbsp;&nbsp;`toggle: 'toggle',`<br>&nbsp;&nbsp;`toggleOn: 'toggle-on',`<br>&nbsp;&nbsp;`toggleOff: 'toggle-off',`<br>&nbsp;&nbsp;`toggleOnDisabled: 'toggle-on-disabled',`<br>&nbsp;&nbsp;`toggleOffDisabled: 'toggle-off-disabled',`<br>&nbsp;&nbsp;`handle: 'toggle-handle',`<br>&nbsp;&nbsp;`handleOn: 'toggle-handle-on',`<br>&nbsp;&nbsp;`handleOff: 'toggle-handle-off',`<br>&nbsp;&nbsp;`handleOnDisabled: 'toggle-handle-on-disabled',`<br>&nbsp;&nbsp;`handleOffDisabled: 'toggle-handle-off-disabled',`<br>&nbsp;&nbsp;`label: 'toggle-label',`<br>`}`.<br> The default value can be used with `default.css` and style can be customized with [CSS variables](#styling-with-css-vars). Alternatively this can be overridden with utility classes like [Tailwind CSS](#styling-with-tailwind-css). |
 
@@ -144,6 +280,5 @@ ## Events
 
-| Slot |  Description |
-| --- | --- |
-| **off** | Rendered when the toggle is `off` (by default `offLabel`). |
-| **on** | Rendered when the toggle is `on` (by default `onLabel`). |
+| Slot | Attributes | Description |
+| --- | --- | --- |
+| **label** | `checked`, `classList` | The label of the toggle element. The `checked` attribute determines whether the toggle is *on* or *off* so you can display the label accordingly. The `classList` contains the resolved class names. |
 
@@ -155,3 +290,3 @@ ## Examples
 * [Toggle with custom values](#toggle-with-custom-values)
-* [Toggle with custom styles](#toggle-with-custom-styles)
+* [Toggle with custom labels](#toggle-with-custom-labels)
 
@@ -166,3 +301,3 @@ ### Default toggle
 
-[JSFiddle - Example #1](https://jsfiddle.net/p60t2bs4/2/)
+[JSFiddle - Example #1](https://jsfiddle.net/4ckev9rx/)
 
@@ -174,3 +309,2 @@ ### Toggle with labels
   v-model="value"
-  id="example2"
   on-label="On"
@@ -181,5 +315,5 @@ off-label="Off"
 
-[JSFiddle - Example #2](https://jsfiddle.net/p60t2bs4/2/)
+[JSFiddle - Example #2](https://jsfiddle.net/4ckev9rx/)
 
-### Toggle with custom values
+### Toggle with custom value
 
@@ -189,3 +323,2 @@ ``` vue
   v-model="value"
-  id="example3"
   true-value="on"
@@ -196,5 +329,5 @@ false-value="off"
 
-[JSFiddle - Example #3](https://jsfiddle.net/p60t2bs4/2/)
+[JSFiddle - Example #3](https://jsfiddle.net/4ckev9rx/)
 
-### Toggle with custom styles
+### Toggle with custom labels
 
@@ -204,12 +337,10 @@ ``` vue
   v-model="value"
-  id="example4"
-  font-size="15px"
-  on-background="#35495e"
-  :width="80"
-  :height="30"
-  :speed="500"
-/>
+>
+  <template v-slot:label="{ checked, classList }">
+    <span :class="classList.label">{{ checked ? 'On' : 'Off' }}</span>
+  </template>
+</Toggle>
 ```
 
-[JSFiddle - Example #4](https://jsfiddle.net/p60t2bs4/2/)
+[JSFiddle - Example #4](https://jsfiddle.net/4ckev9rx/)
 
@@ -216,0 +347,0 @@ ## About Vueform

src/composables/useToggle.js

@@ -5,7 +5,7 @@ import { computed, toRefs } from 'composition-api'
 {
-  const { trueValue, falseValue } = toRefs(props)
+  const { trueValue, falseValue, onLabel, offLabel } = toRefs(props)
   
   // ============ DEPENDENCIES ============
 
-  const inputValue = dependencies.inputValue
+  const checked = dependencies.checked
   const update = dependencies.update
@@ -15,4 +15,10 @@
 
-  const checked = computed(() => {
-    return inputValue.value === trueValue.value
+  const label = computed(() => {
+    let label = checked.value ? onLabel.value : offLabel.value
+
+    if (!label) {
+      label = ' '
+    }
+
+    return label
   })
@@ -35,3 +41,3 @@
   return {
-    checked,
+    label,
     toggle,
@@ -38,0 +44,0 @@ on,

src/composables/useValue.js

@@ -1,10 +0,16 @@
-import { toRefs, watch } from 'composition-api'
+import { toRefs, computed } from 'composition-api'
 
 export default function useValue (props, context, dependencies)
 {
-  const { value: baseValue, modelValue, falseValue, trueValue } = toRefs(props)
+  const { value, modelValue, falseValue, trueValue, disabled } = toRefs(props)
 
   /* istanbul ignore next */
-  const inputValue = context.expose !== undefined ? modelValue : baseValue
+  const externalValue = context.expose !== undefined ? modelValue : value
 
+  // ============== COMPUTED ==============
+
+  const checked = computed(() => {
+    return externalValue.value === trueValue.value
+  })
+
   // =============== METHODS ==============
@@ -19,2 +25,10 @@
 
+  const check = () => {
+    update(trueValue.value)
+  }
+
+  const uncheck = () => {
+    update(falseValue.value)
+  }
+
   const handleInput = (val) => {
@@ -24,17 +38,29 @@ update(val.target.checked ? trueValue.value : falseValue.value)
 
+  const handleClick = () => {
+    if (disabled.value) {
+      return
+    }
+
+    checked.value ? uncheck() : check()
+  }
+
   // ================ HOOKS ===============
 
-  if ([null, undefined, false, 0, '0', 'off'].indexOf(inputValue.value) !== -1) {
-    update(falseValue.value)
+  if ([null, undefined, false, 0, '0', 'off'].indexOf(externalValue.value) !== -1 && externalValue.value !== falseValue.value) {
+    uncheck()
   }
 
-  if ([true, 1, '1', 'on'].indexOf(inputValue.value) !== -1) {
-    update(trueValue.value)
+  if ([true, 1, '1', 'on'].indexOf(externalValue.value) !== -1 && externalValue.value !== trueValue.value) {
+    check()
   }
 
   return {
-    inputValue,
+    externalValue,
+    checked,
     update,
+    check,
+    uncheck,
     handleInput,
+    handleClick,
   }
 }

src/Toggle.vue

 <template>
   <div
-    class="toggle-input"
-    :style="cssVars"
+    :class="classList.container"
+    :tabindex="disabled ? -1 : 0"
+    :aria-checked="checked"
+    :aria-describedby="describedby"
+    :aria-labelledby="labelledby"
+    role="switch"
+    @keyup.space="handleSpace"
   >
     <input
+      v-show="false"
       type="checkbox"
+      :id="id"
       :name="name"
-      :id="id"
+      :value="trueValue"
+      :checked="checked"
       :disabled="disabled"
-      :checked="checked"
-      :trueValue="trueValue"
-      :falseValue="falseValue"
-      @input="handleInput"
     />
-    <label :for="id">
-      <slot name="on">
-        <span class="toggle-on" v-html="onLabel"></span>
+    <div
+      :class="classList.toggle"
+      @click="handleClick"
+    >
+      <span :class="classList.handle"></span>
+      <slot name="label" :checked="checked" :classList="classList">
+        <span
+          :class="classList.label"
+          v-html="label"
+        ></span>
       </slot>
-      <slot name="off">
-        <span class="toggle-off" v-html="offLabel"></span>
-      </slot>
-    </label>
+      <input v-if="required" type="checkbox" :style="{
+        appearance: 'none',
+        height: '1px',
+        margin: '0',
+        padding: '0',
+        fontSize: '0',
+        background: 'transparent',
+        position: 'absolute',
+        width: '100%',
+        bottom: '0',
+        outline: 'none',
+      }" :checked="checked" aria-hidden="true" tabindex="-1" required>
+    </div>
   </div>
@@ -29,4 +49,5 @@ </template>
   import useValue from './composables/useValue'
-  import useStyle from './composables/useStyle'
   import useToggle from './composables/useToggle'
+  import useClasses from './composables/useClasses'
+  import useKeyboard from './composables/useKeyboard'
 
@@ -71,2 +92,7 @@ /* istanbul ignore next */
       },
+      required: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       falseValue: {
@@ -82,3 +108,3 @@ type: [String, Number, Boolean],
       },
-      offLabel: {
+      onLabel: {
         type: [String, Object],
@@ -88,3 +114,3 @@ required: false,
       },
-      onLabel: {
+      offLabel: {
         type: [String, Object],
@@ -94,18 +120,3 @@ required: false,
       },
-      width: {
-        type: Number,
-        required: false,
-        default: 54
-      },
-      height: {
-        type: Number,
-        required: false,
-        default: 24
-      },
-      speed: {
-        type: Number,
-        required: false,
-        default: 300
-      },
-      colors: {
+      classes: {
         type: Object,
@@ -115,7 +126,10 @@ required: false,
       },
-      fontSize: {
+      labelledby: {
         type: String,
         required: false,
-        default: '13px'
       },
+      describedby: {
+        type: String,
+        required: false,
+      },
     },
@@ -126,13 +140,22 @@ setup(props, context)
 
-      const style = useStyle(props, context)
-
       const toggle = useToggle(props, context, {
-        inputValue: value.inputValue,
+        checked: value.checked,
         update: value.update,
       })
 
+      const classes = useClasses(props, context, {
+        checked: value.checked,
+      })
+
+      const keyboard = useKeyboard(props, context, {
+        check: value.check,
+        uncheck: value.uncheck,
+        checked: value.checked,
+      })
+
       return {
         ...value,
-        ...style,
+        ...classes,
         ...toggle,
+        ...keyboard,
       }
@@ -139,0 +162,0 @@ }

themes/default.css

@@ -1,1 +0,1 @@
-.toggle-input label{background:#d4e0e7;background:var(--toggle-off-background);width:54px;width:var(--toggle-width);height:24px;height:var(--toggle-height);display:flex;border-radius:12px;border-radius:var(--toggle-radius);position:relative;cursor:pointer;transition:background .3s;transition:var(--toggle-speed) background;align-items:center;justify-content:center;box-sizing:border-box;padding-left:24px;padding-left:var(--toggle-height);padding-right:6px}.toggle-input label:before{content:" ";background:#fff;background:var(--toggle-off-handle-color);width:18px;width:var(--toggle-handle-size);height:18px;height:var(--toggle-handle-size);border-radius:50%;position:absolute;left:3px;top:3px;transition:left .3s;transition:var(--toggle-speed) left}.toggle-input label .toggle-off,.toggle-input label .toggle-on{font-size:13px;font-size:var(--toggle-font-size);text-align:center;font-weight:500}.toggle-input label .toggle-on{display:none;color:#fff;color:var(--toggle-on-text-color)}.toggle-input label .toggle-off{display:flex;color:#80878c;color:var(--toggle-off-text-color)}.toggle-input input{display:none}.toggle-input input:checked+label{background:#41b883;background:var(--toggle-on-background);padding-right:24px;padding-right:var(--toggle-height);padding-left:6px}.toggle-input input:checked+label:before{background:#fff;background:var(--toggle-on-handle-color);left:calc(100% - var(--toggle-handle-right-on))}.toggle-input input:checked+label .toggle-on{display:flex}.toggle-input input:checked+label .toggle-off{display:none}.toggle-input input:disabled+label{background:#d4e0e7;background:var(--toggle-disabled-background);cursor:not-allowed}.toggle-input input:disabled+label:before{background:#f2faff;background:var(--toggle-disabled-handle-color)}.toggle-input input:disabled+label .toggle-off,.toggle-input input:disabled+label .toggle-on{color:#80878c;color:var(--toggle-disabled-text-color)}
+.toggle-container{display:inline-block}.toggle{display:flex;width:var(--toggle-width,3rem);height:var(--toggle-height,1.25rem);border-radius:999px;position:relative;cursor:pointer;transition:all .3s;align-items:center;box-sizing:content-box;border:var(--toggle-border,.125rem) solid;font-size:var(--toggle-font-size,.75rem);line-height:1}.toggle-on{background:var(--toggle-bg-on,#10b981);border-color:var(--toggle-border-on,#10b981);justify-content:flex-start;color:var(--toggle-text-on,#fff)}.toggle-off{background:var(--toggle-bg-off,#e5e7eb);border-color:var(--toggle-border-off,#e5e7eb);justify-content:flex-end;color:var(--toggle-text-off,#374151)}.toggle-on-disabled{background:var(--toggle-bg-on-disabled,#d1d5db);border-color:var(--toggle-border-on-disabled,#d1d5db);justify-content:flex-start;color:var(--toggle-text-on-disabled,#9ca3af);cursor:not-allowed}.toggle-off-disabled{background:var(--toggle-bg-off-disabled,#e5e7eb);border-color:var(--toggle-border-off-disabled,#e5e7eb);justify-content:flex-end;color:var(--toggle-text-off-disabled,#9ca3af);cursor:not-allowed}.toggle-handle{display:inline-block;background:var(--toggle-handle-enabled,#fff);width:20px;height:20px;top:0;border-radius:50%;position:absolute;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:var(--toggle-duration,.15s)}.toggle-handle-on{left:100%;transform:translateX(-100%)}.toggle-handle-off{left:0}.toggle-handle-on-disabled{left:100%;transform:translateX(-100%);background:var(--toggle-handle-disabled,#f3f4f6)}.toggle-handle-off-disabled{left:0;background:var(--toggle-handle-disabled,#f3f4f6)}.toggle-label{text-align:center;width:calc(var(--toggle-width, 3.25rem) - var(--toggle-height, 1.25rem));box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

themes/default.scss

@@ -1,102 +0,89 @@
-.toggle-input {
-    label {
-      background: #d4e0e7;
-      background: var(--toggle-off-background);
-      width: 54px;
-      width: var(--toggle-width);
-      height: 24px;
-      height: var(--toggle-height);
-      display: flex;
-      border-radius: 12px;
-      border-radius: var(--toggle-radius);
-      position: relative;
-      cursor: pointer;
-      transition: .3s background;
-      transition: var(--toggle-speed) background;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      padding-left: 24px;
-      padding-left: var(--toggle-height);
-      padding-right: 6px;
+.toggle-container {
+  display: inline-block;
+}
 
-      &:before {
-        content: " ";
-        background: #ffffff;
-        background: var(--toggle-off-handle-color);
-        width: 18px;
-        width: var(--toggle-handle-size);
-        height: 18px;
-        height: var(--toggle-handle-size);
-        border-radius: 50%;
-        position: absolute;
-        left: 3px;
-        top: 3px;
-        transition: .3s left;
-        transition: var(--toggle-speed) left;
-      }
+.toggle {
+  display: flex;
+  width: var(--toggle-width, 3rem);
+  height: var(--toggle-height, 1.25rem);
+  border-radius: 999px;
+  position: relative;
+  cursor: pointer;
+  transition: .3s all;
+  align-items: center;
+  box-sizing: content-box;
+  border: var(--toggle-border, 0.125rem) solid;
+  font-size: var(--toggle-font-size, 0.75rem);
+  line-height: 1;
+}
 
-      .toggle-on,
-      .toggle-off {
-        font-size: 13px;
-        font-size: var(--toggle-font-size);
-        text-align: center;
-        font-weight: 500;
-      }
+.toggle-on {
+  background: var(--toggle-bg-on, #10b981);
+  border-color: var(--toggle-border-on, #10b981);
+  justify-content: flex-start;
+  color: var(--toggle-text-on, #ffffff);
+}
 
-      .toggle-on {
-        display: none;
-        color: #ffffff;
-        color: var(--toggle-on-text-color);
-      }
+.toggle-off {
+  background: var(--toggle-bg-off, #e5e7eb);
+  border-color: var(--toggle-border-off, #e5e7eb);
+  justify-content: flex-end;
+  color: var(--toggle-text-off, #374151);
+}
 
-      .toggle-off {
-        display: flex;
-        color: #80878c;
-        color: var(--toggle-off-text-color);
-      }
-    }
+.toggle-on-disabled {
+  background: var(--toggle-bg-on-disabled, #d1d5db);
+  border-color: var(--toggle-border-on-disabled, #d1d5db);
+  justify-content: flex-start;
+  color: var(--toggle-text-on-disabled, #9ca3af);
+  cursor: not-allowed;
+}
 
-    input {
-      display: none;
+.toggle-off-disabled {
+  background: var(--toggle-bg-off-disabled, #e5e7eb);
+  border-color: var(--toggle-border-off-disabled, #e5e7eb);
+  justify-content: flex-end;
+  color: var(--toggle-text-off-disabled, #9ca3af);
+  cursor: not-allowed;
+}
 
-      &:checked + label {
-        background: #41b883;
-        background: var(--toggle-on-background);
-        padding-right: 24px;
-        padding-right: var(--toggle-height);
-        padding-left: 6px;
+.toggle-handle {
+  display: inline-block;
+  background: var(--toggle-handle-enabled, #ffffff);
+  width: 20px;
+  height: 20px;
+  top: 0;
+  border-radius: 50%;
+  position: absolute;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--toggle-duration, 150ms);
+}
 
-        &:before {
-          background: #ffffff;
-          background: var(--toggle-on-handle-color);
-          left: calc(100% - var(--toggle-handle-right-on));
-        }
+.toggle-handle-on {
+  left: 100%;
+  transform: translateX(-100%);
+}
 
-        .toggle-on {
-          display: flex;
-        }
+.toggle-handle-off {
+  left: 0%;
+}
 
-        .toggle-off {
-          display: none;
-        }
-      }
+.toggle-handle-on-disabled {
+  left: 100%;
+  transform: translateX(-100%);
+  background: var(--toggle-handle-disabled, #f3f4f6);
+}
 
-      &:disabled + label {
-        background: #d4e0e7;
-        background: var(--toggle-disabled-background);
-        cursor: not-allowed;
+.toggle-handle-off-disabled {
+  left: 0%;
+  background: var(--toggle-handle-disabled, #f3f4f6);
+}
 
-        &:before {
-          background: #f2faff;
-          background: var(--toggle-disabled-handle-color);
-        }
-
-        .toggle-on,
-        .toggle-off {
-          color: #80878c;
-          color: var(--toggle-disabled-text-color);
-        }
-      }
-    }
-  }
+.toggle-label {
+  text-align: center;
+  width: calc(var(--toggle-width, 3.25rem) - var(--toggle-height, 1.25rem));
+  box-sizing: border-box;
+  white-space: nowrap;
+  user-select: none;
+}

src/composables/useStyle.js

-import { ref, computed, toRefs } from 'composition-api'
-
-export default function useStyle (props, context, dependencies)
-{
-  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': 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',
-      '--toggle-width': width.value + 'px',
-      '--toggle-speed': (speed.value / 1000) + 's',
-      '--toggle-radius': (height.value / 2) + 'px',
-      '--toggle-handle-size': (height.value - 6) + 'px',
-      '--toggle-handle-right-on': (height.value - 3) + 'px',
-      '--toggle-font-size': fontSize.value,
-    }
-
-    return cssVars
-  })
-
-  return {
-    cssVars,
-  }
-}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

48306

28.97%

Number of package files

18

28.57%

Lines of code

239

30.6%

Number of lines in readme file

340

62.68%

No dependency changes