Added disabled property and updated main README.md

Author: niels-bosman

README.md

@@ -31,7 +31,7 @@ npm install vue-toggle-component --save
 </template>
 
 <script>
-import VueToggle from "./components/VueToggle";
+import VueToggle from "vue-toggle-component";
 
 export default {
   name: 'App',
@@ -43,20 +43,20 @@ 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 |
+| Vue version | vue-toggle-component version |
 | ----------- | ---------------------------- |
 | `2.x`       | `0.1.x`                      |
 | `3.x`       | `1.x`                        |

src/App.vue

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

src/components/VueToggle.vue

@@ -1,15 +1,16 @@
 <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"/>
+    <span class="title" @click="toggleState = !toggleState" v-text="title"/>
   </section>
 </template>
 
@@ -20,8 +21,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},
   },
@@ -100,6 +101,14 @@ export default {
       will-change: left;
     }
 
+    .disabled & {
+      opacity: 50%;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+
     .dark & {
       background: #374151;
     }

vue-toggle-component/README.md

@@ -31,7 +31,7 @@ npm install vue-toggle-component --save
 </template>
 
 <script>
-import VueToggle from "./components/VueToggle";
+import VueToggle from "vue-toggle-component";
 
 export default {
   name: 'App',
@@ -56,7 +56,7 @@ export default {
 
 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 |
+| Vue version | vue-toggle-component version |
 | ----------- | ---------------------------- |
 | `2.x`       | `0.1.x`                      |
 | `3.x`       | `1.x`                        |