Accessibility fix, readme update and cleanups.

Author: niels-bosman

README.md

@@ -9,6 +9,12 @@ vue-toggle-component makes an ease to use, lightweight and highly customizable t
 ![Light theme](https://user-images.githubusercontent.com/25898715/116152862-c273f400-a6e6-11eb-8b4d-1017b92d14a5.gif)
 ![Dark theme](https://user-images.githubusercontent.com/25898715/116152879-c7d13e80-a6e6-11eb-87b3-9b606184ba1e.gif)
 
+## Features
+
+- **🍞 Easy:** Easy use with minimal required properties.
+- **🍤 Tiny:** Small footprint < 4kb which makes your apps faster to load.
+- **✅ Accessible:** ARIA attributes in the component which makes it very accessible.
+
 ## Getting Started
 ### Installation
 #### Installing the package
@@ -51,6 +57,30 @@ export default {
 | fontWeight    | `Boolean` | `normal`  | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
+#### Events
+When you toggle the component the component emits the `toggle` event. You can use the event using the example below. The value in the event is the whether the toggler is toggled or not.
+```html
+<template>
+  <VueToggle title="Toggle me" name="VueToggle" @toggle="doSomething"/>
+</template>
+
+<script>
+import VueToggle from "vue-toggle-component";
+
+export default {
+  name: 'App',
+  components: {
+    VueToggle
+  },
+  methods: {
+    doSomething(value) {
+      // value = true || false.
+    }
+  },
+}
+</script>
+```
+
 ### Vue version support
 The main v1 version supports Vue 3.x only, for previous versions of Vue, check the following the table.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toggle-component",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "dist/vue-toggle-component.common.js",
   "files": [
     "dist/*"

src/App.vue

@@ -7,13 +7,12 @@ import VueToggle from "./components/VueToggle";
 
 export default {
   name: 'App',
-  components: {
-    VueToggle
-  }
+  components: { VueToggle }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
+
 * {
   font-family: 'Roboto', sans-serif;
 }

src/components/VueToggle.vue

@@ -1,6 +1,9 @@
 <template>
   <section
-    :class="{'dark': darkTheme, disabled}"
+    :class="{
+      'is-dark': darkTheme,
+      'is-disabled': disabled,
+    }"
     class="m-toggle"
   >
     <input
@@ -14,17 +17,22 @@
     <span
       :aria-checked="toggleState"
       :aria-disabled="disabled"
+      :aria-labelledby="`${id}-label`"
       :aria-readonly="disabled"
-      :aria-labelledby="labelId"
-      :style="toggleState && {background: activeColor}"
+      :style="toggleState && {
+        'background-color': activeColor
+      }"
       class="m-toggle__content"
       role="checkbox"
       @click="toggle"
     />
     <label
-      :id="labelId"
+      :id="`${id}-label`"
       :for="id"
-      :style="[{fontSize: `${fontSize}px`, fontWeight}]"
+      :style="{
+        'font-size': fontSize,
+        'font-weight': fontWeight,
+      }"
       class="m-toggle__label"
     >
       {{ title }}
@@ -40,33 +48,29 @@ export default {
     activeColor: { type: String, default: '#9FD6AE' },
     darkTheme: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    fontSize: { type: Number, default: 16 },
+    fontSize: { type: String, default: '16px' },
     fontWeight: { type: String, default: 'normal' },
     name: { type: String, required: true },
     title: { type: String, required: true },
     toggled: { type: Boolean, default: false },
   },
 
   data() {
-    return {
-      toggleState: this.toggled
-    }
+    return { toggleState: this.toggled }
   },
 
   methods: {
     toggle() {
       if (this.disabled) return;
-      this.toggleState = !this.toggleState
+      this.toggleState = !this.toggleState;
+      this.$emit('toggle', this.toggleState);
     }
   },
 
   computed: {
     id() {
       return this.name.replace(/ /g, '').toLowerCase();
     },
-    labelId() {
-      return `${this.id}-label`
-    },
   },
 }
 </script>
@@ -75,8 +79,8 @@ export default {
 .m-toggle {
   $self: &;
   $toggle-spacing: 2px;
-  display: flex;
   align-items: center;
+  display: flex;
   margin: 0 -5px;
 
   > * {
@@ -87,11 +91,11 @@ export default {
   &__label {
     user-select: none;
 
-    .disabled & {
+    .is-disabled & {
       cursor: not-allowed;
     }
 
-    .dark & {
+    .is-dark & {
       color: white;
     }
   }
@@ -109,19 +113,21 @@ export default {
   }
 
   &__content {
-    box-sizing: border-box;
     background: #F0F0F0;
     border-radius: 2em;
+    box-sizing: border-box;
     height: 2em;
     outline: 0;
+    overflow: hidden;
     padding: $toggle-spacing;
-    transition: background .4s ease;
+    transition: background-color .4s ease;
     width: 4em;
-    will-change: background;
+    will-change: background-color;
 
     &:after {
       background: white;
       border-radius: 50%;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
       content: '';
       display: block;
       height: 100%;
@@ -132,12 +138,12 @@ export default {
       will-change: left;
     }
 
-    .disabled & {
-      opacity: 50%;
+    .is-disabled & {
       cursor: not-allowed;
+      opacity: 50%;
     }
 
-    .dark & {
+    .is-dark & {
       background: #374151;
     }
   }

vue-toggle-component/README.md

@@ -9,6 +9,12 @@ vue-toggle-component makes an ease to use, lightweight and highly customizable t
 ![Light theme](https://user-images.githubusercontent.com/25898715/116152862-c273f400-a6e6-11eb-8b4d-1017b92d14a5.gif)
 ![Dark theme](https://user-images.githubusercontent.com/25898715/116152879-c7d13e80-a6e6-11eb-87b3-9b606184ba1e.gif)
 
+## Features
+
+- **🍞 Easy:** Easy use with minimal required properties.
+- **🍤 Tiny:** Small footprint < 4kb which makes your apps faster to load.
+- **✅ Accessible:** ARIA attributes in the component which makes it very accessible.
+
 ## Getting Started
 ### Installation
 #### Installing the package
@@ -48,9 +54,33 @@ export default {
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
 | disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
 | fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
-| fontWeight    | `Boolean` | `bold`    | ❌        | Sets the font weight of the text next to the toggle.                                               |
+| fontWeight    | `Boolean` | `normal`  | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
+#### Events
+When you toggle the component the component emits the `toggle` event. You can use the event using the example below. The value in the event is the whether the toggler is toggled or not.
+```html
+<template>
+  <VueToggle title="Toggle me" name="VueToggle" @toggle="doSomething"/>
+</template>
+
+<script>
+import VueToggle from "vue-toggle-component";
+
+export default {
+  name: 'App',
+  components: {
+    VueToggle
+  },
+  methods: {
+    doSomething(value) {
+      // value = true || false.
+    }
+  },
+}
+</script>
+```
+
 ### Vue version support
 The main v1 version supports Vue 3.x only, for previous versions of Vue, check the following the table.
 

vue-toggle-component/dist/vue-toggle-component.esm.js

@@ -15,6 +15,14 @@ var script = {
       type: Boolean,
       default: false
     },
+    fontSize: {
+      type: String,
+      default: '16px'
+    },
+    fontWeight: {
+      type: String,
+      default: 'normal'
+    },
     name: {
       type: String,
       required: true
@@ -39,38 +47,53 @@ var script = {
     toggle() {
       if (this.disabled) return;
       this.toggleState = !this.toggleState;
+      this.$emit('toggle', this.toggleState);
+    }
+
+  },
+  computed: {
+    id() {
+      return this.name.replace(/ /g, '').toLowerCase();
     }
 
   }
 };
 
-const _withId = /*#__PURE__*/withScopeId("data-v-84279cda");
+const _withId = /*#__PURE__*/withScopeId("data-v-576222af");
 
 const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
   return openBlock(), createBlock("section", {
     class: [{
-      'dark': $props.darkTheme,
-      'disabled': $props.disabled
-    }, "wrapper"],
-    title: $props.title
+      'is-dark': $props.darkTheme,
+      'is-disabled': $props.disabled
+    }, "m-toggle"]
   }, [withDirectives(createVNode("input", {
-    id: `_${$props.name}`,
+    id: $options.id,
     "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => $data.toggleState = $event),
     disabled: $props.disabled,
     name: $props.name,
-    class: "toggle",
+    class: "m-toggle__input",
     type: "checkbox"
-  }, null, 8, ["id", "disabled", "name"]), [[vModelCheckbox, $data.toggleState]]), createVNode("label", {
-    for: $props.name,
-    style: [$data.toggleState && {
-      'background': $props.activeColor
-    }],
-    class: "toggler",
+  }, null, 8, ["id", "disabled", "name"]), [[vModelCheckbox, $data.toggleState]]), createVNode("span", {
+    "aria-checked": $data.toggleState,
+    "aria-disabled": $props.disabled,
+    "aria-labelledby": `${$options.id}-label`,
+    "aria-readonly": $props.disabled,
+    style: $data.toggleState && {
+      'background-color': $props.activeColor
+    },
+    class: "m-toggle__content",
+    role: "checkbox",
     onClick: _cache[2] || (_cache[2] = (...args) => $options.toggle && $options.toggle(...args))
-  }, null, 12, ["for"]), createVNode("span", {
-    class: "title",
-    onClick: _cache[3] || (_cache[3] = (...args) => $options.toggle && $options.toggle(...args))
-  }, toDisplayString($props.title), 1)], 10, ["title"]);
+  }, null, 12, ["aria-checked", "aria-disabled", "aria-labelledby", "aria-readonly"]), createVNode("label", {
+    id: `${$options.id}-label`,
+    for: $options.id,
+    style: {
+      'font-size': $props.fontSize,
+      'font-weight': $props.fontWeight
+    },
+    class: "m-toggle__label"
+  }, toDisplayString($props.title), 13, ["id", "for"])], 2);
 });
 
 function styleInject(css, ref) {
@@ -100,11 +123,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.wrapper[data-v-84279cda] {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 5px;\n}\n.wrapper > *[data-v-84279cda] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.title[data-v-84279cda] {\n  display: inline-block;\n  font-weight: 700;\n  line-height: 2em;\n  vertical-align: middle;\n}\n.title[data-v-84279cda]::selection {\n  background: none;\n}\n.disabled .title[data-v-84279cda]:hover {\n  cursor: not-allowed;\n}\n.dark .title[data-v-84279cda] {\n  color: white;\n}\n.toggle[data-v-84279cda] {\n  display: none;\n}\n.toggle[data-v-84279cda]:after, .toggle + .toggler[data-v-84279cda] {\n  box-sizing: border-box;\n}\n.toggle[data-v-84279cda]:after::selection, .toggle + .toggler[data-v-84279cda]::selection {\n  background: none;\n}\n.toggle + .toggler[data-v-84279cda] {\n  background: #f0f0f0;\n  border-radius: 2em;\n  display: block;\n  height: 2em;\n  outline: 0;\n  padding: 2px;\n  position: relative;\n  transition: background 0.4s ease;\n  user-select: none;\n  width: 4em;\n  will-change: background;\n}\n.toggle + .toggler[data-v-84279cda]:after {\n  background: white;\n  border-radius: 50%;\n  content: \"\";\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: 50%;\n  will-change: left;\n}\n.disabled .toggle + .toggler[data-v-84279cda] {\n  opacity: 50%;\n}\n.disabled .toggle + .toggler[data-v-84279cda]:hover {\n  cursor: not-allowed;\n}\n.dark .toggle + .toggler[data-v-84279cda] {\n  background: #374151;\n}\n.toggle:checked + .toggler[data-v-84279cda]:after {\n  left: 50%;\n}\n\n";
+var css_248z = "\n.m-toggle[data-v-576222af] {\n  align-items: center;\n  display: flex;\n  margin: 0 -5px;\n}\n.m-toggle > *[data-v-576222af] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.m-toggle__label[data-v-576222af] {\n  user-select: none;\n}\n.is-disabled .m-toggle__label[data-v-576222af] {\n  cursor: not-allowed;\n}\n.is-dark .m-toggle__label[data-v-576222af] {\n  color: white;\n}\n.m-toggle__input[data-v-576222af] {\n  display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-576222af]:after {\n  left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-576222af] {\n  background: #F0F0F0;\n  border-radius: 2em;\n  box-sizing: border-box;\n  height: 2em;\n  outline: 0;\n  overflow: hidden;\n  padding: 2px;\n  transition: background-color 0.4s ease;\n  width: 4em;\n  will-change: background-color;\n}\n.m-toggle__content[data-v-576222af]:after {\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n  content: '';\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: calc(50% - 2px);\n  will-change: left;\n}\n.is-disabled .m-toggle__content[data-v-576222af] {\n  cursor: not-allowed;\n  opacity: 50%;\n}\n.is-dark .m-toggle__content[data-v-576222af] {\n  background: #374151;\n}\n\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-84279cda";
+script.__scopeId = "data-v-576222af";
 
 // Import vue component
 // IIFE injects install function into component, allowing component