From a52ede3ced4cfe1c2c9f6559a42a65bc2ec9896e Mon Sep 17 00:00:00 2001 From: Samuell Date: Mon, 27 Nov 2017 18:23:27 +0100 Subject: [PATCH 1/5] feat(MdSelect): add md-selected event --- src/components/MdField/MdSelect/MdSelect.vue | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue index 9fdb81f72..2d7d0f627 100644 --- a/src/components/MdField/MdSelect/MdSelect.vue +++ b/src/components/MdField/MdSelect/MdSelect.vue @@ -129,6 +129,9 @@ } }, methods: { + selected (value) { + this.$emit('md-selected', value) + }, elHasScroll (el) { return el.scrollHeight > el.offsetHeight }, @@ -202,12 +205,15 @@ let includes = index > -1 if (!includes) { this.localValue = this.localValue.concat([value]) + this.emitSelected(this.localValue) return } this.localValue = this.arrayAccessorRemove(this.localValue, index) + this.emitSelected(this.localValue) }, setValue (newValue) { this.model = newValue + this.emitSelected(newValue) this.setFieldValue() this.showSelect = false }, @@ -225,7 +231,6 @@ }, setMultipleValue (value) { const newValue = value - this.toggleArrayValue(newValue) this.setFieldValue() }, @@ -262,6 +267,10 @@ if (!this.multiple && isArray) { this.localValue = this.localValue.length > 0 ? this.localValue[0] : null } + }, + emitSelected (value) { + console.log(value) + this.$emit('md-selected', value) } }, async mounted () { From 7a07973800f1c2abf6ad30fa3c17caca510557d3 Mon Sep 17 00:00:00 2001 From: Samuell Date: Mon, 27 Nov 2017 18:23:53 +0100 Subject: [PATCH 2/5] docs(MdSelect): add event md-selected --- docs/app/pages/Components/Select/Select.vue | 117 +++++++++++--------- 1 file changed, 65 insertions(+), 52 deletions(-) diff --git a/docs/app/pages/Components/Select/Select.vue b/docs/app/pages/Components/Select/Select.vue index 59a9ce7d4..6712547a3 100644 --- a/docs/app/pages/Components/Select/Select.vue +++ b/docs/app/pages/Components/Select/Select.vue @@ -32,7 +32,8 @@

The following options can be applied to any select:

- + + @@ -58,57 +59,69 @@ mixins: [examples], data: () => ({ select: { - headings: ['Name', 'Description', 'Default'], - props: [ - { - name: 'v-model', - type: 'String|Number|Boolean|Array', - description: 'The model variable to bind the select value', - defaults: 'null' - }, - { - name: 'placeholder', - type: 'String', - description: 'The select placeholder. Similar to HTML5 placeholder attribute.', - defaults: 'null' - }, - { - name: 'required', - type: 'String', - description: 'The select required. Similar to HTML5 required attribute.', - defaults: 'null' - }, - { - name: 'id', - type: 'String', - description: 'The select id. Similar to HTML5 id attribute.', - defaults: 'null' - }, - { - name: 'name', - type: 'String', - description: 'The select name. Similar to HTML5 name attribute.', - defaults: 'null' - }, - { - name: 'disabled', - type: 'Boolean', - description: 'Disable the select and prevent it selection.', - defaults: 'false' - }, - { - name: 'multiple', - type: 'Boolean', - description: 'Create a multi selection with checkboxes inside. Only works with a v-model with an Array', - defaults: 'false' - }, - { - name: 'md-dense', - type: 'Boolean', - description: 'Enable the dense layout', - defaults: 'false' - } - ] + props: { + headings: ['Name', 'Description', 'Default'], + props: [ + { + name: 'v-model', + type: 'String|Number|Boolean|Array', + description: 'The model variable to bind the select value', + defaults: 'null' + }, + { + name: 'placeholder', + type: 'String', + description: 'The select placeholder. Similar to HTML5 placeholder attribute.', + defaults: 'null' + }, + { + name: 'required', + type: 'String', + description: 'The select required. Similar to HTML5 required attribute.', + defaults: 'null' + }, + { + name: 'id', + type: 'String', + description: 'The select id. Similar to HTML5 id attribute.', + defaults: 'null' + }, + { + name: 'name', + type: 'String', + description: 'The select name. Similar to HTML5 name attribute.', + defaults: 'null' + }, + { + name: 'disabled', + type: 'Boolean', + description: 'Disable the select and prevent it selection.', + defaults: 'false' + }, + { + name: 'multiple', + type: 'Boolean', + description: 'Create a multi selection with checkboxes inside. Only works with a v-model with an Array', + defaults: 'false' + }, + { + name: 'md-dense', + type: 'Boolean', + description: 'Enable the dense layout', + defaults: 'false' + } + ], + }, + events: { + headings: ['Name', 'Description', 'Value'], + props: [ + { + name: 'md-selected', + description: 'Triggered when the model changes.', + value: 'Receives the value of the model' + } + ] + } }, option: { headings: ['Name', 'Description', 'Default'], From 9943d50cfca6ceb206efd2b917c3415906cc2fb3 Mon Sep 17 00:00:00 2001 From: Samuell Date: Tue, 28 Nov 2017 12:44:08 +0100 Subject: [PATCH 3/5] refactor(MdSelect): remove console log --- src/components/MdField/MdSelect/MdSelect.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue index 2d7d0f627..5b0b661cb 100644 --- a/src/components/MdField/MdSelect/MdSelect.vue +++ b/src/components/MdField/MdSelect/MdSelect.vue @@ -269,7 +269,6 @@ } }, emitSelected (value) { - console.log(value) this.$emit('md-selected', value) } }, From c2f2604a06f028a5b978c49a228b26141c4134be Mon Sep 17 00:00:00 2001 From: Samuell Date: Tue, 28 Nov 2017 15:57:37 +0100 Subject: [PATCH 4/5] refactor(MdSelect): remove same method --- src/components/MdField/MdSelect/MdSelect.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue index 5b0b661cb..25452d1ab 100644 --- a/src/components/MdField/MdSelect/MdSelect.vue +++ b/src/components/MdField/MdSelect/MdSelect.vue @@ -129,9 +129,6 @@ } }, methods: { - selected (value) { - this.$emit('md-selected', value) - }, elHasScroll (el) { return el.scrollHeight > el.offsetHeight }, From b5b47320a5ead98bb536b71c280d9a136e6bd16d Mon Sep 17 00:00:00 2001 From: Samuell Date: Thu, 30 Nov 2017 10:23:12 +0100 Subject: [PATCH 5/5] refactor(MdSelect): remove empty return --- src/components/MdField/MdSelect/MdSelect.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/MdField/MdSelect/MdSelect.vue b/src/components/MdField/MdSelect/MdSelect.vue index 25452d1ab..0246f709d 100644 --- a/src/components/MdField/MdSelect/MdSelect.vue +++ b/src/components/MdField/MdSelect/MdSelect.vue @@ -202,10 +202,9 @@ let includes = index > -1 if (!includes) { this.localValue = this.localValue.concat([value]) - this.emitSelected(this.localValue) - return + } else { + this.localValue = this.arrayAccessorRemove(this.localValue, index) } - this.localValue = this.arrayAccessorRemove(this.localValue, index) this.emitSelected(this.localValue) }, setValue (newValue) {