vue-switches - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

package.json

 {
   "name": "vue-switches",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "An on/off switch component for Vue.js with theme support.",
@@ -5,0 +5,0 @@ "main": "switches.vue",

README.md

 # Vue Switches
 A Vue.js component for simple switches with theme support for [bulma](http://bulma.io), [bootstrap](http://getbootstrap.com/) and custom themes. See a live demo [here](http://drewjbartlett.com/demos/vue-switches/).
 
-<img src="http://cagefreeproduce.com/images/vue-switches.png" />
+<img src="http://drewjbartlett.com/demos/images/vue-switches.png" />
+<img src="http://drewjbartlett.com/demos/images/vue-switches-bold.png" />
 
@@ -9,3 +10,3 @@ ## Installation
 ```bash
-    npm install vue-switches --save
+npm install vue-switches --save
 ```
@@ -40,7 +41,8 @@
 
-`label` - A static label to always display whether on or off.
-`text-enabled` - The text that displays when enabled.
-`text-disabled` - The text that displays when disabled.
-`theme` - Which theme to use.
-`color` - Which color to use.
+`label` - A static label to always display whether on or off. <br />
+`text-enabled` - The text that displays when enabled. <br />
+`text-disabled` - The text that displays when disabled. <br />
+`theme` - Which theme to use. <br />
+`color` - Which color to use. <br />
+`type-bold` - Bigger style. <br />
 
@@ -64,3 +66,3 @@
 
-    <switches v-model="enabled" :selected="enabled" theme="bulma" color="default"></switches>
+<switches v-model="enabled" :selected="enabled" theme="bulma" color="default"></switches>
 
@@ -81,4 +83,14 @@ ```
 
-A demo of all themes can be seen [here](http://drewjbartlett.com/demos/vue-switches/).
+## Styles
 
+Out of the box `vue-switches` has two styles: `default` and `bold`. By default the switch is not bold. To enable the bold style you can set `type-bold` to true like this:
+
+```html
+
+<switches v-model="enabled" :selected="enabled" type-bold="true"></switches>
+
+```
+
+A demo of all themes and styles can be seen [here](http://drewjbartlett.com/demos/vue-switches/).
+
 ## Making Your Own Themes
@@ -125,3 +137,3 @@ Vue Switcher has a base class of  `.vue-switcher`. For an unchecked switch a class of `.vue-switcher--unchecked` is applied. Lastly, for the `theme` and `color` props a class is also applied. So for a `bulma` theme of color `primary` the classes `.vue-switcher-theme--bulma` and `.vue-switcher-color--primary`.
 
-    const { color, enabled, theme } = this;
+    const { color, enabled, theme, typeBold, disabled } = this;
 
@@ -132,2 +144,4 @@ return {
         ['vue-switcher--disabled'] : disabled,
+        ['vue-switcher--bold']: typeBold,
+        ['vue-switcher--bold--unchecked']: typeBold && !enabled,
         [`vue-switcher-theme--${theme}`] : color,
@@ -134,0 +148,0 @@ [`vue-switcher-color--${color}`] : color,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14384

increased by10.65%

Number of lines in readme file

147

increased by10.53%

No dependency changes