From e06cebbb211938d30dd2fd2eb58a2871ca39582e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 18 May 2020 18:45:55 -0300 Subject: [PATCH 1/6] feat(b-navbar-toggle): add `disabled` prop --- src/components/navbar/navbar-toggle.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index a34623f3609..0d46bd05281 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -23,6 +23,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ target: { type: String, required: true + }, + disabled: { + type: Boolean, + default: false } }, data() { @@ -36,8 +40,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ }, methods: { onClick(evt) { - // Emit courtesy `click` event - this.$emit('click', evt) + if (!this.disabled) { + // Emit courtesy `click` event + this.$emit('click', evt) + } }, handleStateEvt(id, state) { // We listen for state events so that we can pass the @@ -48,17 +54,19 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ } }, render(h) { - const expanded = this.toggleState + const { disabled, label, target, toggleState } = this + return h( 'button', { staticClass: CLASS_NAME, - directives: [{ name: 'BToggle', value: this.target }], - attrs: { type: 'button', 'aria-label': this.label }, + class: { disabled }, + directives: [{ name: 'BToggle', value: target }], + attrs: { type: 'button', disabled, 'aria-label': label }, on: { click: this.onClick } }, [ - this.normalizeSlot('default', { expanded }) || + this.normalizeSlot('default', { expanded: toggleState }) || h('span', { staticClass: `${CLASS_NAME}-icon` }) ] ) From 069fd53f6c1051b18acfe5f9a0c43a5c37372b4b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 18 May 2020 18:49:57 -0300 Subject: [PATCH 2/6] Update package.json --- src/components/navbar/package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json index c36d5a1b466..d82c107c4ec 100644 --- a/src/components/navbar/package.json +++ b/src/components/navbar/package.json @@ -78,6 +78,11 @@ "prop": "label", "settings": true, "description": "String to place in the toggle's 'aria-label' attribute" + }, + { + "prop": "disabled", + "version": "2.15.0", + "description": "When `true`, disables the navbar toggle button, and adds classname `disabled` to the button" } ], "events": [ From be25c19d0daac6c8c75e5739868fd5ff46ca852c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 18 May 2020 18:58:02 -0300 Subject: [PATCH 3/6] Update navbar-toggle.spec.js --- src/components/navbar/navbar-toggle.spec.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/components/navbar/navbar-toggle.spec.js b/src/components/navbar/navbar-toggle.spec.js index 12b1098f92e..58d6cf03bb7 100644 --- a/src/components/navbar/navbar-toggle.spec.js +++ b/src/components/navbar/navbar-toggle.spec.js @@ -159,4 +159,22 @@ describe('navbar-toggle', () => { wrapper.destroy() }) + + it('disabled prop works', async () => { + const wrapper = mount(BNavbarToggle, { + propsData: { + target: 'target-9', + disabled: true + } + }) + + expect(wrapper.emitted('click')).not.toBeDefined() + expect(wrapper.element.hasAttribute('disabled')).toBe(true) + expect(wrapper.classes()).toContain('disabled') + + await wrapper.trigger('click') + expect(wrapper.emitted('click')).not.toBeDefined() + + wrapper.destroy() + }) }) From 0fb3cf2e84df88e655895ef2cadfb89ce3979771 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 18 May 2020 19:01:31 -0300 Subject: [PATCH 4/6] Update navbar-toggle.js --- src/components/navbar/navbar-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index 0d46bd05281..c6eebd96515 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -55,7 +55,7 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ }, render(h) { const { disabled, label, target, toggleState } = this - + return h( 'button', { From a2b1ca43646cac67fc86815350287725a9216959 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 19 May 2020 00:13:42 +0200 Subject: [PATCH 5/6] Update package.json --- src/components/navbar/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json index d82c107c4ec..8011b2a3fc4 100644 --- a/src/components/navbar/package.json +++ b/src/components/navbar/package.json @@ -82,7 +82,7 @@ { "prop": "disabled", "version": "2.15.0", - "description": "When `true`, disables the navbar toggle button, and adds classname `disabled` to the button" + "description": "When `true`, disables the navbar toggle button, and adds class `disabled` to the button" } ], "events": [ From d4b756e6d65ae0d6242211b63967ed3c01294653 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 19 May 2020 00:15:38 +0200 Subject: [PATCH 6/6] Update navbar-toggle.js --- src/components/navbar/navbar-toggle.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js index c6eebd96515..35a44309ceb 100644 --- a/src/components/navbar/navbar-toggle.js +++ b/src/components/navbar/navbar-toggle.js @@ -54,19 +54,23 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({ } }, render(h) { - const { disabled, label, target, toggleState } = this + const { disabled } = this return h( 'button', { staticClass: CLASS_NAME, class: { disabled }, - directives: [{ name: 'BToggle', value: target }], - attrs: { type: 'button', disabled, 'aria-label': label }, + directives: [{ name: 'BToggle', value: this.target }], + attrs: { + type: 'button', + disabled, + 'aria-label': this.label + }, on: { click: this.onClick } }, [ - this.normalizeSlot('default', { expanded: toggleState }) || + this.normalizeSlot('default', { expanded: this.toggleState }) || h('span', { staticClass: `${CLASS_NAME}-icon` }) ] )