From 6148343d9cec69798abc2c911d13c9b1836a2654 Mon Sep 17 00:00:00 2001 From: Praneet Loke Date: Sun, 19 Feb 2017 20:16:32 -0800 Subject: [PATCH 1/2] Fix bug #529. Don't allow disabled options to be selectable. --- docs/src/pages/components/Select.vue | 18 ++++++++++++++---- src/components/mdSelect/mdOption.vue | 3 +++ src/components/mdSelect/mdSelect.scss | 14 +++++++++++--- 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/Select.vue b/docs/src/pages/components/Select.vue index 72fb43f..a904f46 100644 --- a/docs/src/pages/components/Select.vue +++ b/docs/src/pages/components/Select.vue @@ -174,7 +174,7 @@ Arial Calibri Cambria - Comic Sans + Comic Sans Consolas Courier Droid Sans @@ -185,7 +185,7 @@ Segoe UI Times New Roman Ubuntu - Verdana + Verdana @@ -244,7 +244,7 @@ <md-option value="arial">Arial</md-option> <md-option value="calibri">Calibri</md-option> <md-option value="cambria">Cambria</md-option> - <md-option value="comic_sans">Comic Sans</md-option> + <md-option value="comic_sans" :disabled="true">Comic Sans</md-option> <md-option value="consolas">Consolas</md-option> <md-option value="courier">Courier</md-option> <md-option value="droid_sans">Droid Sans</md-option> @@ -255,7 +255,7 @@ <md-option value="segoe_ui">Segoe UI</md-option> <md-option value="times_new_roman">Times New Roman</md-option> <md-option value="ubuntu">Ubuntu</md-option> - <md-option value="verdana">Verdana</md-option> + <md-option value="verdana" :disabled="isDisabled">Verdana</md-option> </md-select> </md-input-container> @@ -289,6 +289,11 @@ country: '', font: '' }), + computed: { + isDisabled() { + return true; + } + }, methods: { setPulpFiction() { this.movie = 'pulp_fiction'; @@ -405,6 +410,11 @@ 'michael_scott' ] }), + computed: { + isDisabled() { + return true; + } + }, methods: { setPulpFiction() { this.movie = 'pulp_fiction'; diff --git a/src/components/mdSelect/mdOption.vue b/src/components/mdSelect/mdOption.vue index 12c6ac7..ff79aa2 100644 --- a/src/components/mdSelect/mdOption.vue +++ b/src/components/mdSelect/mdOption.vue @@ -62,6 +62,9 @@ } }, selectOption($event) { + if (this.disabled) { + return; + } this.setParentOption(); this.$emit('selected', $event); } diff --git a/src/components/mdSelect/mdSelect.scss b/src/components/mdSelect/mdSelect.scss index 70803ca..76ead98 100644 --- a/src/components/mdSelect/mdSelect.scss +++ b/src/components/mdSelect/mdSelect.scss @@ -2,6 +2,12 @@ $select-height: 32px; +@mixin disable-item { + pointer-events: none; + user-select: none; + user-drag: none; +} + .md-select { width: 100%; min-width: 128px; @@ -43,9 +49,7 @@ $select-height: 32px; } &.md-disabled { - pointer-events: none; - user-select: none; - user-drag: none; + @include disable-item; } select { @@ -94,6 +98,10 @@ $select-height: 32px; margin-left: -16px; } + .md-option[disabled] { + @include disable-item; + } + .md-menu-item .md-list-item-holder { overflow: visible; justify-content: flex-start; From ceeb1c37c2e6c37716ef558039f3b7b79c640f4d Mon Sep 17 00:00:00 2001 From: Praneet Loke Date: Mon, 27 Feb 2017 17:16:04 -0800 Subject: [PATCH 2/2] Change subTotal to a computed property. --- src/components/mdTable/mdTablePagination.vue | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/mdTable/mdTablePagination.vue b/src/components/mdTable/mdTablePagination.vue index 357eb08..746b939 100644 --- a/src/components/mdTable/mdTablePagination.vue +++ b/src/components/mdTable/mdTablePagination.vue @@ -46,7 +46,6 @@ }, data() { return { - subTotal: 0, totalItems: 0, currentPage: 1, currentSize: parseInt(this.mdSize, 10) @@ -72,14 +71,16 @@ }, shouldDisable() { return this.currentSize * this.currentPage >= this.totalItems; + }, + subTotal() { + const sub = this.currentPage * this.currentSize; + + return sub > this.mdTotal ? this.mdTotal : sub; } }, methods: { emitPaginationEvent() { if (this.canFireEvents) { - const sub = this.currentPage * this.currentSize; - - this.subTotal = sub > this.mdTotal ? this.mdTotal : sub; this.$emit('pagination', { size: this.currentSize, page: this.currentPage @@ -109,7 +110,6 @@ }, mounted() { this.$nextTick(() => { - this.subTotal = this.currentPage * this.currentSize; this.mdPageOptions = this.mdPageOptions || [10, 25, 50, 100]; this.currentSize = this.mdPageOptions.includes(this.currentSize) ? this.currentSize : this.mdPageOptions[0]; this.canFireEvents = true;