From 7255f8986272ac81c657dcf18e9c88bcfb433f26 Mon Sep 17 00:00:00 2001 From: Cristian Date: Mon, 12 Mar 2018 01:42:47 +0000 Subject: [PATCH 1/7] added btn color prop --- dist/index.js | 11 +++++++++-- dist/ssr.index.js | 11 +++++++++-- src/Button.vue | 11 ++++++++++- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/dist/index.js b/dist/index.js index 0e6fec9..68fb77b 100644 --- a/dist/index.js +++ b/dist/index.js @@ -182,6 +182,12 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, + buttonColor: { + type: [String, Object], + validator: function validator(value) { + return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; + } + }, cssColors: { type: Boolean, default: false @@ -232,7 +238,8 @@ var px = function px(v) { width: px(this.buttonRadius), height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', - transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null + transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, + backgroundColor: this.buttonColor ? this.buttonColor : undefined }; }, labelStyle: function labelStyle() { @@ -458,7 +465,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c on: { "change": function($event) { $event.stopPropagation(); - _vm.toggle($event) + return _vm.toggle($event) } } }), _vm._v(" "), _c('div', { diff --git a/dist/ssr.index.js b/dist/ssr.index.js index 8e2279f..be12126 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -182,6 +182,12 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, + buttonColor: { + type: [String, Object], + validator: function validator(value) { + return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; + } + }, cssColors: { type: Boolean, default: false @@ -232,7 +238,8 @@ var px = function px(v) { width: px(this.buttonRadius), height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', - transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null + transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, + backgroundColor: this.buttonColor ? this.buttonColor : undefined }; }, labelStyle: function labelStyle() { @@ -458,7 +465,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c on: { "change": function($event) { $event.stopPropagation(); - _vm.toggle($event) + return _vm.toggle($event) } } }), _vm._v(" "), _c('div', { diff --git a/src/Button.vue b/src/Button.vue index 45d3b4c..7fb8e50 100644 --- a/src/Button.vue +++ b/src/Button.vue @@ -68,6 +68,14 @@ export default { : typeof value === 'string' } }, + buttonColor: { + type: [String, Object], + validator (value) { + return typeof value === 'object' + ? (value.checked || value.unchecked) + : typeof value === 'string' + } + }, cssColors: { type: Boolean, default: false @@ -125,7 +133,8 @@ export default { transition: `transform ${this.speed}ms`, transform: this.toggled ? `translate3d(${this.distance}, 3px, 0px)` - : null + : null, + backgroundColor: this.buttonColor ? this.buttonColor : undefined } }, From 8d860d2331e9b219e4338155fcf84718aad33624 Mon Sep 17 00:00:00 2001 From: Cristian Date: Thu, 19 Apr 2018 23:33:53 +0100 Subject: [PATCH 2/7] support btn color object --- dist/index.js | 27 +++++++++++++++++++++++++-- dist/ssr.index.js | 27 +++++++++++++++++++++++++-- src/Button.vue | 34 ++++++++++++++++++++++++++++++++-- 3 files changed, 82 insertions(+), 6 deletions(-) diff --git a/dist/index.js b/dist/index.js index 68fb77b..3428338 100644 --- a/dist/index.js +++ b/dist/index.js @@ -146,7 +146,8 @@ var constants = { labelUnchecked: 'off', width: 50, height: 22, - margin: 3 + margin: 3, + buttonColor: '#fff' }; var contains = function contains(object, title) { @@ -239,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - backgroundColor: this.buttonColor ? this.buttonColor : undefined + backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -271,6 +272,28 @@ var px = function px(v) { }, labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; + }, + buttonColorChecked: function buttonColorChecked() { + var buttonColor = this.buttonColor; + + + return contains(buttonColor, 'checked') ? buttonColor.checked : constants.buttonColor; + }, + buttonColorUnchecked: function buttonColorUnchecked() { + var buttonColor = this.buttonColor; + + + return contains(buttonColor, 'unchecked') ? buttonColor.unchecked : constants.buttonColor; + }, + buttonColorCurrent: function buttonColorCurrent() { + var buttonColor = this.buttonColor; + + + if ((typeof buttonColor === 'undefined' ? 'undefined' : _typeof(buttonColor)) !== 'object') { + return buttonColor || constants.buttonColor; + } + + return this.toggled ? this.buttonColorChecked : this.buttonColorUnchecked; } }, watch: { diff --git a/dist/ssr.index.js b/dist/ssr.index.js index be12126..46edae5 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -146,7 +146,8 @@ var constants = { labelUnchecked: 'off', width: 50, height: 22, - margin: 3 + margin: 3, + buttonColor: '#fff' }; var contains = function contains(object, title) { @@ -239,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - backgroundColor: this.buttonColor ? this.buttonColor : undefined + backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -271,6 +272,28 @@ var px = function px(v) { }, labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; + }, + buttonColorChecked: function buttonColorChecked() { + var buttonColor = this.buttonColor; + + + return contains(buttonColor, 'checked') ? buttonColor.checked : constants.buttonColor; + }, + buttonColorUnchecked: function buttonColorUnchecked() { + var buttonColor = this.buttonColor; + + + return contains(buttonColor, 'unchecked') ? buttonColor.unchecked : constants.buttonColor; + }, + buttonColorCurrent: function buttonColorCurrent() { + var buttonColor = this.buttonColor; + + + if ((typeof buttonColor === 'undefined' ? 'undefined' : _typeof(buttonColor)) !== 'object') { + return buttonColor || constants.buttonColor; + } + + return this.toggled ? this.buttonColorChecked : this.buttonColorUnchecked; } }, watch: { diff --git a/src/Button.vue b/src/Button.vue index 7fb8e50..0522ef0 100644 --- a/src/Button.vue +++ b/src/Button.vue @@ -32,7 +32,8 @@ const constants = { labelUnchecked: 'off', width: 50, height: 22, - margin: 3 + margin: 3, + buttonColor: '#fff' } const contains = (object, title) => { @@ -134,7 +135,7 @@ export default { transform: this.toggled ? `translate3d(${this.distance}, 3px, 0px)` : null, - backgroundColor: this.buttonColor ? this.buttonColor : undefined + backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined } }, @@ -180,7 +181,36 @@ export default { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked + }, + + buttonColorChecked () { + let { buttonColor } = this + + return contains(buttonColor, 'checked') + ? buttonColor.checked + : constants.buttonColor + }, + + buttonColorUnchecked () { + let { buttonColor } = this + + return contains(buttonColor, 'unchecked') + ? buttonColor.unchecked + : constants.buttonColor + }, + + buttonColorCurrent () { + let { buttonColor } = this + + if (typeof buttonColor !== 'object') { + return buttonColor || constants.buttonColor + } + + return this.toggled + ? this.buttonColorChecked + : this.buttonColorUnchecked } + }, watch: { value (value) { From 2b1ae4c51a4e0a5130a06909745b556cfd48ade7 Mon Sep 17 00:00:00 2001 From: Cristian Date: Thu, 19 Apr 2018 23:34:34 +0100 Subject: [PATCH 3/7] updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0d49d74..b8fca73 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ Use: | color | [String, Object] | `#75C791` | If `String` - color of the button when checked
If `Object` - colors for the button when checked/uncheked
Example: `{checked: '#00FF00', unchecked: '#FF0000'}` | | cssColors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling | | labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off")
If `Object` - sets custom labels for both states.
Example: `{checked: 'Foo', unchecked: 'Bar'}` | +| buttonColor | [String, Object] | `#BFCBD9` | If `String` - color of the switch when checked
If `Object` - colors for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: '#EF1E02'}` | | width | Number | 50 | Width of the button, default is 50 | | height | Number | 22 | Height of the button, default is 22 | From 22b59c7c7af1bf13b90bb319bd6dd335e11a6a47 Mon Sep 17 00:00:00 2001 From: Cristian Date: Fri, 20 Apr 2018 00:00:13 +0100 Subject: [PATCH 4/7] allow generic background css property --- README.md | 2 +- dist/index.js | 28 ++++++++++++++-------------- dist/ssr.index.js | 28 ++++++++++++++-------------- src/Button.vue | 38 +++++++++++++++++++------------------- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index b8fca73..36d7ffd 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ Use: | color | [String, Object] | `#75C791` | If `String` - color of the button when checked
If `Object` - colors for the button when checked/uncheked
Example: `{checked: '#00FF00', unchecked: '#FF0000'}` | | cssColors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling | | labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off")
If `Object` - sets custom labels for both states.
Example: `{checked: 'Foo', unchecked: 'Bar'}` | -| buttonColor | [String, Object] | `#BFCBD9` | If `String` - color of the switch when checked
If `Object` - colors for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: '#EF1E02'}` | +| buttonBackground | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked
If `Object` - colors or background property for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` | | width | Number | 50 | Width of the button, default is 50 | | height | Number | 22 | Height of the button, default is 22 | diff --git a/dist/index.js b/dist/index.js index 3428338..5112f82 100644 --- a/dist/index.js +++ b/dist/index.js @@ -147,7 +147,7 @@ var constants = { width: 50, height: 22, margin: 3, - buttonColor: '#fff' + buttonBackground: '#fff' }; var contains = function contains(object, title) { @@ -183,7 +183,7 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, - buttonColor: { + buttonBackground: { type: [String, Object], validator: function validator(value) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; @@ -240,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined + background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -273,27 +273,27 @@ var px = function px(v) { labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; }, - buttonColorChecked: function buttonColorChecked() { - var buttonColor = this.buttonColor; + buttonBackgroundChecked: function buttonBackgroundChecked() { + var buttonBackground = this.buttonBackground; - return contains(buttonColor, 'checked') ? buttonColor.checked : constants.buttonColor; + return contains(buttonBackground, 'checked') ? buttonBackground.checked : constants.buttonBackground; }, - buttonColorUnchecked: function buttonColorUnchecked() { - var buttonColor = this.buttonColor; + buttonBackgroundUnchecked: function buttonBackgroundUnchecked() { + var buttonBackground = this.buttonBackground; - return contains(buttonColor, 'unchecked') ? buttonColor.unchecked : constants.buttonColor; + return contains(buttonBackground, 'unchecked') ? buttonBackground.unchecked : constants.buttonBackground; }, - buttonColorCurrent: function buttonColorCurrent() { - var buttonColor = this.buttonColor; + buttonBackgroundCurrent: function buttonBackgroundCurrent() { + var buttonBackground = this.buttonBackground; - if ((typeof buttonColor === 'undefined' ? 'undefined' : _typeof(buttonColor)) !== 'object') { - return buttonColor || constants.buttonColor; + if ((typeof buttonBackground === 'undefined' ? 'undefined' : _typeof(buttonBackground)) !== 'object') { + return buttonBackground || constants.buttonBackground; } - return this.toggled ? this.buttonColorChecked : this.buttonColorUnchecked; + return this.toggled ? this.buttonBackgroundChecked : this.buttonBackgroundUnchecked; } }, watch: { diff --git a/dist/ssr.index.js b/dist/ssr.index.js index 46edae5..18c3cda 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -147,7 +147,7 @@ var constants = { width: 50, height: 22, margin: 3, - buttonColor: '#fff' + buttonBackground: '#fff' }; var contains = function contains(object, title) { @@ -183,7 +183,7 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, - buttonColor: { + buttonBackground: { type: [String, Object], validator: function validator(value) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; @@ -240,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined + background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -273,27 +273,27 @@ var px = function px(v) { labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; }, - buttonColorChecked: function buttonColorChecked() { - var buttonColor = this.buttonColor; + buttonBackgroundChecked: function buttonBackgroundChecked() { + var buttonBackground = this.buttonBackground; - return contains(buttonColor, 'checked') ? buttonColor.checked : constants.buttonColor; + return contains(buttonBackground, 'checked') ? buttonBackground.checked : constants.buttonBackground; }, - buttonColorUnchecked: function buttonColorUnchecked() { - var buttonColor = this.buttonColor; + buttonBackgroundUnchecked: function buttonBackgroundUnchecked() { + var buttonBackground = this.buttonBackground; - return contains(buttonColor, 'unchecked') ? buttonColor.unchecked : constants.buttonColor; + return contains(buttonBackground, 'unchecked') ? buttonBackground.unchecked : constants.buttonBackground; }, - buttonColorCurrent: function buttonColorCurrent() { - var buttonColor = this.buttonColor; + buttonBackgroundCurrent: function buttonBackgroundCurrent() { + var buttonBackground = this.buttonBackground; - if ((typeof buttonColor === 'undefined' ? 'undefined' : _typeof(buttonColor)) !== 'object') { - return buttonColor || constants.buttonColor; + if ((typeof buttonBackground === 'undefined' ? 'undefined' : _typeof(buttonBackground)) !== 'object') { + return buttonBackground || constants.buttonBackground; } - return this.toggled ? this.buttonColorChecked : this.buttonColorUnchecked; + return this.toggled ? this.buttonBackgroundChecked : this.buttonBackgroundUnchecked; } }, watch: { diff --git a/src/Button.vue b/src/Button.vue index 0522ef0..a1c501e 100644 --- a/src/Button.vue +++ b/src/Button.vue @@ -33,7 +33,7 @@ const constants = { width: 50, height: 22, margin: 3, - buttonColor: '#fff' + buttonBackground: '#fff' } const contains = (object, title) => { @@ -69,7 +69,7 @@ export default { : typeof value === 'string' } }, - buttonColor: { + buttonBackground: { type: [String, Object], validator (value) { return typeof value === 'object' @@ -135,7 +135,7 @@ export default { transform: this.toggled ? `translate3d(${this.distance}, 3px, 0px)` : null, - backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined + background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined } }, @@ -183,32 +183,32 @@ export default { : constants.labelUnchecked }, - buttonColorChecked () { - let { buttonColor } = this + buttonBackgroundChecked () { + let { buttonBackground } = this - return contains(buttonColor, 'checked') - ? buttonColor.checked - : constants.buttonColor + return contains(buttonBackground, 'checked') + ? buttonBackground.checked + : constants.buttonBackground }, - buttonColorUnchecked () { - let { buttonColor } = this + buttonBackgroundUnchecked () { + let { buttonBackground } = this - return contains(buttonColor, 'unchecked') - ? buttonColor.unchecked - : constants.buttonColor + return contains(buttonBackground, 'unchecked') + ? buttonBackground.unchecked + : constants.buttonBackground }, - buttonColorCurrent () { - let { buttonColor } = this + buttonBackgroundCurrent () { + let { buttonBackground } = this - if (typeof buttonColor !== 'object') { - return buttonColor || constants.buttonColor + if (typeof buttonBackground !== 'object') { + return buttonBackground || constants.buttonBackground } return this.toggled - ? this.buttonColorChecked - : this.buttonColorUnchecked + ? this.buttonBackgroundChecked + : this.buttonBackgroundUnchecked } }, From 23b14f0d8a996c0c2b791b254a2a84dc8bfeab76 Mon Sep 17 00:00:00 2001 From: Cristian Date: Fri, 20 Apr 2018 00:04:45 +0100 Subject: [PATCH 5/7] demo of button background --- demo/src/App.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/demo/src/App.vue b/demo/src/App.vue index 7eac1b5..6d01074 100644 --- a/demo/src/App.vue +++ b/demo/src/App.vue @@ -34,6 +34,12 @@ :color="{unchecked: '#FF6699'}" :labels="{unchecked: 'Disabled button'}" :disabled="true"/> + +
Date: Thu, 26 Apr 2018 10:15:38 +0100 Subject: [PATCH 6/7] changed buttonBackground to switchColor --- dist/index.js | 28 ++++++++++++++-------------- dist/ssr.index.js | 28 ++++++++++++++-------------- src/Button.vue | 38 +++++++++++++++++++------------------- 3 files changed, 47 insertions(+), 47 deletions(-) diff --git a/dist/index.js b/dist/index.js index 5112f82..4a124f2 100644 --- a/dist/index.js +++ b/dist/index.js @@ -147,7 +147,7 @@ var constants = { width: 50, height: 22, margin: 3, - buttonBackground: '#fff' + switchColor: '#fff' }; var contains = function contains(object, title) { @@ -183,7 +183,7 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, - buttonBackground: { + switchColor: { type: [String, Object], validator: function validator(value) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; @@ -240,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined + background: this.switchColor ? this.switchColorCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -273,27 +273,27 @@ var px = function px(v) { labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; }, - buttonBackgroundChecked: function buttonBackgroundChecked() { - var buttonBackground = this.buttonBackground; + switchColorChecked: function switchColorChecked() { + var switchColor = this.switchColor; - return contains(buttonBackground, 'checked') ? buttonBackground.checked : constants.buttonBackground; + return contains(switchColor, 'checked') ? switchColor.checked : constants.switchColor; }, - buttonBackgroundUnchecked: function buttonBackgroundUnchecked() { - var buttonBackground = this.buttonBackground; + switchColorUnchecked: function switchColorUnchecked() { + var switchColor = this.switchColor; - return contains(buttonBackground, 'unchecked') ? buttonBackground.unchecked : constants.buttonBackground; + return contains(switchColor, 'unchecked') ? switchColor.unchecked : constants.switchColor; }, - buttonBackgroundCurrent: function buttonBackgroundCurrent() { - var buttonBackground = this.buttonBackground; + switchColorCurrent: function switchColorCurrent() { + var switchColor = this.switchColor; - if ((typeof buttonBackground === 'undefined' ? 'undefined' : _typeof(buttonBackground)) !== 'object') { - return buttonBackground || constants.buttonBackground; + if ((typeof switchColor === 'undefined' ? 'undefined' : _typeof(switchColor)) !== 'object') { + return switchColor || constants.switchColor; } - return this.toggled ? this.buttonBackgroundChecked : this.buttonBackgroundUnchecked; + return this.toggled ? this.switchColorChecked : this.switchColorUnchecked; } }, watch: { diff --git a/dist/ssr.index.js b/dist/ssr.index.js index 18c3cda..dc1f41e 100644 --- a/dist/ssr.index.js +++ b/dist/ssr.index.js @@ -147,7 +147,7 @@ var constants = { width: 50, height: 22, margin: 3, - buttonBackground: '#fff' + switchColor: '#fff' }; var contains = function contains(object, title) { @@ -183,7 +183,7 @@ var px = function px(v) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; } }, - buttonBackground: { + switchColor: { type: [String, Object], validator: function validator(value) { return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string'; @@ -240,7 +240,7 @@ var px = function px(v) { height: px(this.buttonRadius), transition: 'transform ' + this.speed + 'ms', transform: this.toggled ? 'translate3d(' + this.distance + ', 3px, 0px)' : null, - background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined + background: this.switchColor ? this.switchColorCurrent : undefined }; }, labelStyle: function labelStyle() { @@ -273,27 +273,27 @@ var px = function px(v) { labelUnchecked: function labelUnchecked() { return contains(this.labels, 'unchecked') ? this.labels.unchecked : constants.labelUnchecked; }, - buttonBackgroundChecked: function buttonBackgroundChecked() { - var buttonBackground = this.buttonBackground; + switchColorChecked: function switchColorChecked() { + var switchColor = this.switchColor; - return contains(buttonBackground, 'checked') ? buttonBackground.checked : constants.buttonBackground; + return contains(switchColor, 'checked') ? switchColor.checked : constants.switchColor; }, - buttonBackgroundUnchecked: function buttonBackgroundUnchecked() { - var buttonBackground = this.buttonBackground; + switchColorUnchecked: function switchColorUnchecked() { + var switchColor = this.switchColor; - return contains(buttonBackground, 'unchecked') ? buttonBackground.unchecked : constants.buttonBackground; + return contains(switchColor, 'unchecked') ? switchColor.unchecked : constants.switchColor; }, - buttonBackgroundCurrent: function buttonBackgroundCurrent() { - var buttonBackground = this.buttonBackground; + switchColorCurrent: function switchColorCurrent() { + var switchColor = this.switchColor; - if ((typeof buttonBackground === 'undefined' ? 'undefined' : _typeof(buttonBackground)) !== 'object') { - return buttonBackground || constants.buttonBackground; + if ((typeof switchColor === 'undefined' ? 'undefined' : _typeof(switchColor)) !== 'object') { + return switchColor || constants.switchColor; } - return this.toggled ? this.buttonBackgroundChecked : this.buttonBackgroundUnchecked; + return this.toggled ? this.switchColorChecked : this.switchColorUnchecked; } }, watch: { diff --git a/src/Button.vue b/src/Button.vue index a1c501e..691cd16 100644 --- a/src/Button.vue +++ b/src/Button.vue @@ -33,7 +33,7 @@ const constants = { width: 50, height: 22, margin: 3, - buttonBackground: '#fff' + switchColor: '#fff' } const contains = (object, title) => { @@ -69,7 +69,7 @@ export default { : typeof value === 'string' } }, - buttonBackground: { + switchColor: { type: [String, Object], validator (value) { return typeof value === 'object' @@ -135,7 +135,7 @@ export default { transform: this.toggled ? `translate3d(${this.distance}, 3px, 0px)` : null, - background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined + background: this.switchColor ? this.switchColorCurrent : undefined } }, @@ -183,32 +183,32 @@ export default { : constants.labelUnchecked }, - buttonBackgroundChecked () { - let { buttonBackground } = this + switchColorChecked () { + let { switchColor } = this - return contains(buttonBackground, 'checked') - ? buttonBackground.checked - : constants.buttonBackground + return contains(switchColor, 'checked') + ? switchColor.checked + : constants.switchColor }, - buttonBackgroundUnchecked () { - let { buttonBackground } = this + switchColorUnchecked () { + let { switchColor } = this - return contains(buttonBackground, 'unchecked') - ? buttonBackground.unchecked - : constants.buttonBackground + return contains(switchColor, 'unchecked') + ? switchColor.unchecked + : constants.switchColor }, - buttonBackgroundCurrent () { - let { buttonBackground } = this + switchColorCurrent () { + let { switchColor } = this - if (typeof buttonBackground !== 'object') { - return buttonBackground || constants.buttonBackground + if (typeof switchColor !== 'object') { + return switchColor || constants.switchColor } return this.toggled - ? this.buttonBackgroundChecked - : this.buttonBackgroundUnchecked + ? this.switchColorChecked + : this.switchColorUnchecked } }, From 4e779a3f92abb6f471507e964b421121a3c4fc65 Mon Sep 17 00:00:00 2001 From: Cristian Date: Thu, 26 Apr 2018 10:16:27 +0100 Subject: [PATCH 7/7] updated readme and demo --- README.md | 2 +- demo/src/App.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 36d7ffd..78e465d 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ Use: | color | [String, Object] | `#75C791` | If `String` - color of the button when checked
If `Object` - colors for the button when checked/uncheked
Example: `{checked: '#00FF00', unchecked: '#FF0000'}` | | cssColors | Boolean | false | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling | | labels | [Boolean, Object] | false | If `Boolean` - shows/hides default labels ("on" and "off")
If `Object` - sets custom labels for both states.
Example: `{checked: 'Foo', unchecked: 'Bar'}` | -| buttonBackground | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked
If `Object` - colors or background property for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` | +| switchColor | [String, Object] | `#BFCBD9` | If `String` - color or background property of the switch when checked
If `Object` - colors or background property for the switch when checked/uncheked
Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}` | | width | Number | 50 | Width of the button, default is 50 | | height | Number | 22 | Height of the button, default is 22 | diff --git a/demo/src/App.vue b/demo/src/App.vue index 6d01074..11739fb 100644 --- a/demo/src/App.vue +++ b/demo/src/App.vue @@ -39,7 +39,7 @@ :labels="{checked: 'Button', unchecked: 'Collor'}" :color="{checked: '#7DCE94', unchecked: '#82C7EB'}" :width="80" - :buttonBackground="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/> + :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>