Changes

Author: niels-bosman

README.md

@@ -24,7 +24,7 @@ npm install vue-toggle-component --save
 #### Example
 ```html
 <template>
-  <VueToggle title="Toggle me" id="1"/>
+  <VueToggle title="Toggle me" name="VueToggle"/>
 </template>
 
 <script>

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <VueToggle title="Toggle me" name="VueToggle" disabled/>
+  <VueToggle title="Toggle me" name="VueToggle"/>
 </template>
 
 <script>

src/components/VueToggle.vue

@@ -1,16 +1,24 @@
 <template>
-  <section :class="{'dark': darkTheme, 'disabled': disabled}" :title="title" class="wrapper">
+  <section
+      :class="{'dark': darkTheme, 'disabled': disabled}"
+      :title="title"
+      class="wrapper"
+  >
     <input
       :id="`_${name}`"
       v-model="toggleState"
       :disabled="disabled"
       :name="name"
       class="toggle"
       type="checkbox"
-      @click="toggleState = !toggleState"
     />
-    <label :for="name" :style="[toggleState && {'background': activeColor}]" class="toggler"/>
-    <span class="title" @click="toggleState = !toggleState" v-text="title"/>
+    <label
+        :for="name"
+        :style="[toggleState && {'background': activeColor}]"
+        class="toggler"
+        @click="toggle"
+    />
+    <span class="title" @click="toggle">{{title}}</span>
   </section>
 </template>
 
@@ -32,6 +40,13 @@ export default {
       toggleState: this.toggled
     }
   },
+
+  methods: {
+    toggle() {
+      if (this.disabled) return;
+      this.toggleState = !this.toggleState
+    }
+  },
 }
 </script>
 
@@ -58,6 +73,12 @@ export default {
     background: none;
   }
 
+  .disabled & {
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
   .dark & {
     color: white;
   }

vue-toggle-component/README.md

@@ -6,13 +6,11 @@ vue-toggle-component makes an ease to use, lightweight and highly customizable t
 ![npm](https://img.shields.io/npm/v/vue-toggle-component)
 ![GitHub Repo stars](https://img.shields.io/github/stars/niels-bosman/vue-toggle-component?style=social)
 
-
 ![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)
-## Getting Started
 
+## Getting Started
 ### Installation
-
 #### Installing the package
 ```sh
 # install with yarn
@@ -22,12 +20,11 @@ yarn add vue-toggle-component
 npm install vue-toggle-component --save
 ```
 
-
 ### Usage
 #### Example
 ```html
 <template>
-  <VueToggle title="Toggle me" id="1"/>
+  <VueToggle title="Toggle me" name="VueToggle"/>
 </template>
 
 <script>
@@ -43,37 +40,33 @@ export default {
 ```
 
 #### Properties that vue-toggle-component uses
-| Property name | Description                  |
-| ------------- | ---------------------------- |
-| `activeColor` | The active color the checked toggler uses. This is a hex code. Default: `#9FD6AE` |
-| `darkTheme`   | Give this prop to the component to use the dark mode feature as shown in the GIF above. |
-| `id`          | The ID the input and the label use in the component. |
-| `name`        | The name attributes that will be set in the input. |
-| `title`       | The title that is shown after the toggler itself. |
-| `toggled`     | The value the toggler has by default, by default this is `false` |
+| Property name | Type      | Default   | Required |Description                                                                                         |
+| ------------- | --------- | --------- | -------- | -------------------------------------------------------------------------------------------------- |
+| name          | `String`  | -         | X        | Set's the name value of the input (checkbox). Useful for persisting data.                          |
+| title         | `String`  | -         | X        | The title that is displayed next to the toggle.                                                    |
+| activeColor   | `String`  | `#9FD6AE` | -        | The color that is displayed when the toggler is active.                                            |
+| darkTheme     | `Boolean` | `false`   | -        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
+| disabled      | `Boolean` | `false`   | -        | Disables the toggler.                                                                              |
+| toggled       | `Boolean` | `true`    | -        | Sets the default value for the toggler.                                                            |
 
 ### Vue version support
-
 The main v1 version supports Vue 3.x only, for previous versions of Vue, check the following the table.
 
 | Vue version | vue-toggle-component version |
 | ----------- | ---------------------------- |
 | `2.x`       | `0.1.x`                      |
 | `3.x`       | `1.x`                        |
-### Authors
 
+### Authors
 #### Niels Bosman
-
 www.github.com/niels-bosman
 
 https://nielsbosman.dev
 
 #### Mike van Egmond
-
 www.github.com/mve
 
 https://egmond.dev
 
 ### License
-
 MIT

vue-toggle-component/src/vue-toggle-component.vue

@@ -1,15 +1,24 @@
 <template>
-  <section class="wrapper" :class="{dark: darkTheme}" :title="title">
+  <section
+      :class="{'dark': darkTheme, 'disabled': disabled}"
+      :title="title"
+      class="wrapper"
+  >
     <input
-        :id="id"
-        :name="name"
+        :id="`_${name}`"
         v-model="toggleState"
+        :disabled="disabled"
+        :name="name"
         class="toggle"
         type="checkbox"
-        @click="toggleState = !toggleState"
     />
-    <label :for="id" class="toggler" :style="[toggleState && {'background': activeColor}]"/>
-    <span class="title" v-text="title" @click="toggleState = !toggleState"/>
+    <label
+        :for="name"
+        :style="[toggleState && {'background': activeColor}]"
+        class="toggler"
+        @click="toggle"
+    />
+    <span class="title" @click="toggle">{{title}}</span>
   </section>
 </template>
 
@@ -20,8 +29,8 @@ export default {
   props: {
     activeColor: {type: String, default: '#9FD6AE'},
     darkTheme: {type: Boolean, default: false},
-    id: {type: String, required: true},
-    name: {type: [String, Boolean], default: false},
+    disabled: {type: Boolean, default: false },
+    name: {type: String, required: true},
     title: {type: String, required: true},
     toggled: {type: Boolean, default: false},
   },
@@ -31,6 +40,13 @@ export default {
       toggleState: this.toggled
     }
   },
+
+  methods: {
+    toggle() {
+      if (this.disabled) return;
+      this.toggleState = !this.toggleState
+    }
+  },
 }
 </script>
 
@@ -53,6 +69,9 @@ export default {
 .title::selection {
   background: none;
 }
+.disabled .title:hover {
+  cursor: not-allowed;
+}
 .dark .title {
   color: white;
 }
@@ -90,10 +109,17 @@ export default {
   width: 50%;
   will-change: left;
 }
+.disabled .toggle + .toggler {
+  opacity: 50%;
+}
+.disabled .toggle + .toggler:hover {
+  cursor: not-allowed;
+}
 .dark .toggle + .toggler {
   background: #374151;
 }
 .toggle:checked + .toggler:after {
   left: 50%;
 }
+
 </style>