fix(mdc-slider): Set min and max taking into account current max value.

stasson · Mar 20, 2018 · 2d61239 · 2d61239
1 parent a267f34
commit 2d61239
Showing 1 changed file with 79 additions and 75 deletions.
diff --git a/components/slider/mdc-slider.vue b/components/slider/mdc-slider.vue
@@ -23,15 +23,15 @@
 </template>
 
 <script>
-import MDCSliderFoundation from '@material/slider/foundation'
-import {DispatchFocusMixin} from '../base'
+import MDCSliderFoundation from '@material/slider/foundation';
+import { DispatchFocusMixin } from '../base';
 
 export default {
   name: 'mdc-slider',
   mixins: [DispatchFocusMixin],
   model: {
     prop: 'value',
-    event: 'change'
+    event: 'change',
   },
   props: {
     value: [Number, String],
@@ -41,140 +41,144 @@ export default {
     displayMarkers: Boolean,
     disabled: Boolean,
     layoutOn: String,
-    layoutOnSource: {type: Object, required: false},
+    layoutOnSource: { type: Object, required: false },
   },
-  data () {
+  data() {
     return {
       classes: {
         'mdc-slider--discrete': !!this.step,
-        'mdc-slider--display-markers': this.displayMarkers
+        'mdc-slider--display-markers': this.displayMarkers,
       },
       trackStyles: {},
       lastTrackMarkersStyles: {},
       thumbStyles: {},
       markerValue: '',
-      numMarkers: 0
-    }
+      numMarkers: 0,
+    };
   },
   computed: {
-    isDiscrete () {
-      return !!this.step
+    isDiscrete() {
+      return !!this.step;
+    },
+    hasMarkers() {
+      return !!this.step && this.displayMarkers && this.numMarkers;
     },
-    hasMarkers () {
-      return !!this.step && this.displayMarkers && this.numMarkers
-    }
   },
   watch: {
-    value () {
+    value() {
       if (this.foundation.getValue() !== Number(this.value)) {
-        this.foundation.setValue(this.value)
+        this.foundation.setValue(this.value);
       }
     },
-    min () {
-      this.foundation.setMin(Number(this.min))
+    min() {
+      this.foundation.setMin(Number(this.min));
     },
-    max () {
-      this.foundation.setMax(Number(this.max))
+    max() {
+      this.foundation.setMax(Number(this.max));
     },
-    step () {
-      this.foundation.setStep(Number(this.step))
+    step() {
+      this.foundation.setStep(Number(this.step));
+    },
+    disabled() {
+      this.foundation.setDisabled(this.disabled);
     },
-    disabled () {
-      this.foundation.setDisabled(this.disabled)
-    }
   },
   methods: {
-    layout () {
-      this.$nextTick( () => {
-        this.foundation && this.foundation.layout()
-      })
-    }
+    layout() {
+      this.$nextTick(() => {
+        this.foundation && this.foundation.layout();
+      });
+    },
   },
-  mounted () {
+  mounted() {
     this.foundation = new MDCSliderFoundation({
-      hasClass: (className) => this.$el.classList.contains(className),
-      addClass: (className) => {
-        this.$set(this.classes, className, true)
+      hasClass: className => this.$el.classList.contains(className),
+      addClass: className => {
+        this.$set(this.classes, className, true);
       },
-      removeClass: (className) => {
-        this.$delete(this.classes, className, true)
+      removeClass: className => {
+        this.$delete(this.classes, className, true);
       },
-      getAttribute: (name) => this.$el.getAttribute(name),
+      getAttribute: name => this.$el.getAttribute(name),
       setAttribute: (name, value) => this.$el.setAttribute(name, value),
-      removeAttribute: (name) => this.$el.removeAttribute(name),
+      removeAttribute: name => this.$el.removeAttribute(name),
       computeBoundingRect: () => this.$el.getBoundingClientRect(),
       getTabIndex: () => this.$el.tabIndex,
       registerInteractionHandler: (type, handler) => {
-        this.$el.addEventListener(type, handler)
+        this.$el.addEventListener(type, handler);
       },
       deregisterInteractionHandler: (type, handler) => {
-        this.$el.removeEventListener(type, handler)
+        this.$el.removeEventListener(type, handler);
       },
       registerThumbContainerInteractionHandler: (type, handler) => {
-        this.$refs.thumbContainer.addEventListener(type, handler)
+        this.$refs.thumbContainer.addEventListener(type, handler);
       },
       deregisterThumbContainerInteractionHandler: (type, handler) => {
-        this.$refs.thumbContainer.removeEventListener(type, handler)
+        this.$refs.thumbContainer.removeEventListener(type, handler);
       },
       registerBodyInteractionHandler: (type, handler) => {
-        document.body.addEventListener(type, handler)
+        document.body.addEventListener(type, handler);
       },
       deregisterBodyInteractionHandler: (type, handler) => {
-        document.body.removeEventListener(type, handler)
+        document.body.removeEventListener(type, handler);
       },
-      registerResizeHandler: (handler) => {
-        window.addEventListener('resize', handler)
+      registerResizeHandler: handler => {
+        window.addEventListener('resize', handler);
       },
-      deregisterResizeHandler: (handler) => {
-        window.removeEventListener('resize', handler)
+      deregisterResizeHandler: handler => {
+        window.removeEventListener('resize', handler);
       },
       notifyInput: () => {
-        this.$emit('input', this.foundation.getValue())
+        this.$emit('input', this.foundation.getValue());
       },
       notifyChange: () => {
-        this.$emit('change', this.foundation.getValue())
+        this.$emit('change', this.foundation.getValue());
       },
       setThumbContainerStyleProperty: (propertyName, value) => {
-        this.$set(this.thumbStyles, propertyName, value)
+        this.$set(this.thumbStyles, propertyName, value);
       },
       setTrackStyleProperty: (propertyName, value) => {
-        this.$set(this.trackStyles, propertyName, value)
+        this.$set(this.trackStyles, propertyName, value);
       },
-      setMarkerValue: (value) => {
-        this.markerValue = value
+      setMarkerValue: value => {
+        this.markerValue = value;
       },
-      appendTrackMarkers: (numMarkers) => {
-        this.numMarkers = numMarkers
+      appendTrackMarkers: numMarkers => {
+        this.numMarkers = numMarkers;
       },
       removeTrackMarkers: () => {
-        this.numMarkers = 0
+        this.numMarkers = 0;
       },
       setLastTrackMarkersStyleProperty: (propertyName, value) => {
-        this.$set(this.lastTrackMarkersStyles, propertyName, value)
+        this.$set(this.lastTrackMarkersStyles, propertyName, value);
       },
-      isRTL: () => false
-    })
+      isRTL: () => false,
+    });
 
-    this.foundation.init()
-    this.foundation.setDisabled(this.disabled)
-    this.foundation.setMin(Number(this.min))
-    this.foundation.setMax(Number(this.max))
-    this.foundation.setStep(Number(this.step))
-    this.foundation.setValue(Number(this.value))
+    this.foundation.init();
+    this.foundation.setDisabled(this.disabled);
+    if (Number(this.min) <= this.foundation.getMax()) {
+      this.foundation.setMin(Number(this.min));
+      this.foundation.setMax(Number(this.max));
+    } else {
+      this.foundation.setMax(Number(this.max));
+      this.foundation.setMin(Number(this.min));
+    }
+    this.foundation.setStep(Number(this.step));
+    this.foundation.setValue(Number(this.value));
     if (this.hasMarkers) {
-      this.foundation.setupTrackMarker()
+      this.foundation.setupTrackMarker();
     }
-    
-    this.$root.$on('mdc:layout', this.layout)
+
+    this.$root.$on('mdc:layout', this.layout);
 
     if (this.layoutOn) {
-      let source = this.layoutOnSource || this.$root
-      source.$on(this.layoutOn, this.layout)
+      let source = this.layoutOnSource || this.$root;
+      source.$on(this.layoutOn, this.layout);
     }
-    
   },
-  beforeDestroy () {
-    this.foundation.destroy()
-  }
-}
+  beforeDestroy() {
+    this.foundation.destroy();
+  },
+};
 </script>