vue-bootstrap-slider - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

lib/mixins.js

@@ -121,124 +121,148 @@ export const props = {
   watch: {
-    min () {
-      if (this.slider) {
-        this.slider.setAttribute('min', this.min)
+    min (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('min', value)
+        this.slider.refresh()
       }
     },
-    max () {
-      if (this.slider) {
-        this.slider.setAttribute('max', this.max)
+    max (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('max', value)
+        this.slider.refresh()
       }
     },
-    step () {
-      if (this.slider) {
-        this.slider.setAttribute('step', this.step)
+    step (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('step', value)
+        this.slider.refresh()
       }
     },
-    precision () {
-      if (this.slider) {
-        this.slider.setAttribute('precision', this.precision)
+    precision (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('precision', value)
+        this.slider.refresh()
       }
     },
-    orientation () {
-      if (this.slider) {
-        this.slider.setAttribute('orientation', this.orientation)
+    orientation (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('orientation', value)
+        this.slider.refresh()
       }
     },
-    range () {
-      if (this.slider) {
-        this.slider.setAttribute('range', this.range)
+    range (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('range', value)
+        this.slider.refresh()
       }
     },
-    selection () {
-      if (this.slider) {
-        this.slider.setAttribute('selection', this.selection)
+    selection (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('selection', value)
+        this.slider.refresh()
       }
     },
-    tooltip () {
-      if (this.slider) {
-        this.slider.setAttribute('tooltip', this.tooltip)
+    tooltip (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('tooltip', value)
+        this.slider.refresh()
       }
     },
-    tooltipSplit () {
-      if (this.slider) {
-        this.slider.setAttribute('tooltipSplit', this.tooltipSplit)
+    tooltipSplit (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('tooltipSplit', value)
+        this.slider.refresh()
       }
     },
-    tooltipPosition () {
-      if (this.slider) {
-        this.slider.setAttribute('tooltipPosition', this.tooltipPosition)
+    tooltipPosition (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('tooltipPosition', value)
+        this.slider.refresh()
       }
     },
-    handle () {
-      if (this.slider) {
-        this.slider.setAttribute('handle', this.handle)
+    handle (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('handle', value)
+        this.slider.refresh()
       }
     },
-    reversed () {
-      if (this.slider) {
-        this.slider.setAttribute('reversed', this.reversed)
+    reversed (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('reversed', value)
+        this.slider.refresh()
       }
     },
-    rtl () {
-      if (this.slider) {
-        this.slider.setAttribute('rtl', this.rtl)
+    rtl (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('rtl', value)
+        this.slider.refresh()
       }
     },
-    formatter () {
-      if (this.slider) {
-        this.slider.setAttribute('formatter', this.formatter)
+    formatter (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('formatter', value)
+        this.slider.refresh()
       }
     },
-    naturalArrowKeys () {
-      if (this.slider) {
-        this.slider.setAttribute('naturalArrowKeys', this.naturalArrowKeys)
+    naturalArrowKeys (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('naturalArrowKeys', value)
+        this.slider.refresh()
       }
     },
-    ticks () {
+    ticks (value, oldValue) {
       if (this.slider) {
-        this.slider.setAttribute('ticks', this.ticks)
+        this.slider.setAttribute('ticks', value)
+        this.slider.refresh()
       }
     },
-    ticksPositions () {
+    ticksPositions (value, oldValue) {
       if (this.slider) {
-        this.slider.setAttribute('ticksPositions', this.ticksPositions)
+        this.slider.setAttribute('ticksPositions', value)
+        this.slider.refresh()
       }
     },
-    ticksLabels () {
+    ticksLabels (value, oldValue) {
       if (this.slider) {
-        this.slider.setAttribute('ticksLabels', this.ticksLabels)
+        this.slider.setAttribute('ticksLabels', value)
+        this.slider.refresh()
       }
     },
-    ticksSnapBounds () {
-      if (this.slider) {
-        this.slider.setAttribute('ticksSnapBounds', this.ticksSnapBounds)
+    ticksSnapBounds (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('ticksSnapBounds', value)
+        this.slider.refresh()
       }
     },
-    ticksTooltip () {
-      if (this.slider) {
-        this.slider.setAttribute('ticksTooltip', this.ticksTooltip)
+    ticksTooltip (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('ticksTooltip', value)
+        this.slider.refresh()
       }
     },
-    scale () {
-      if (this.slider) {
-        this.slider.setAttribute('scale', this.scale)
+    scale (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('scale', value)
+        this.slider.refresh()
       }
     },
-    focus () {
-      if (this.slider) {
-        this.slider.setAttribute('focus', this.focus)
+    focus (value, oldValue) {
+      if (this.slider && value !== oldValue) {
+        this.slider.setAttribute('focus', value)
+        this.slider.refresh()
       }
     },
-    labelledby () {
+    labelledby (value, oldValue) {
       if (this.slider) {
-        this.slider.setAttribute('labelledby', this.labelledby)
+        this.slider.setAttribute('labelledby', value)
+        this.slider.refresh()
       }
     },
-    rangeHighlights () {
+    rangeHighlights (value, oldValue) {
       if (this.slider) {
-        this.slider.setAttribute('rangeHighlights', this.rangeHighlights)
+        this.slider.setAttribute('rangeHighlights', value)
+        this.slider.refresh()
       }
     },
-    disabled () {
-      if (this.disabled) {
+    disabled (value) {
+      if (value) {
         this.slider.disable()
@@ -249,4 +273,4 @@ } else {
     },
-    value () {
-      this.slider.setValue(this.value, this.triggerSlideEvent, this.triggerChangeEvent)
+    value (value) {
+      this.slider.setValue(value, this.triggerSlideEvent, this.triggerChangeEvent)
     }
@@ -253,0 +277,0 @@ }

package.json

 {
   "name": "vue-bootstrap-slider",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Vue bindings for seiyria/bootstrap-slider",
@@ -5,0 +5,0 @@ "author": "pimlie <[e-mail]>",

README.md

@@ -85,5 +85,8 @@ # Vue.js Bootstrap Slider
 
-### Known issues
-- Tooltips are not working in Bootstrap 4, see this [issue](https://github.com/seiyria/bootstrap-slider/issues/689)
+### Direct access to the Slider object from your component
+```js
+<b-form-slider ref="mySlider"></b-form-slider>
 
-
+const mySlider = this.$refs.mySlider
+mySlider.slider.refresh()
+```

tests/components/form-slider.spec.js

@@ -62,2 +62,15 @@ import {loadFixture, testVM, setData} from '../helpers';
     })
+
+    it('props are reactive', async () => {
+        const {app: {$refs, $el}} = window;
+
+        const vm = $refs.reactiveProps
+
+        let sliderReactive = vm.$el.querySelectorAll('.tooltip-main')
+        expect(sliderReactive).not.toBeNull();
+        expect(window.getComputedStyle(sliderReactive[0]).left).toEqual('2%');
+
+        await setData(app, 'max', 8)
+        expect(window.getComputedStyle(sliderReactive[0]).left).toEqual('25%');
+    })
 });

tests/fixtures/form-slider/demo.js

@@ -8,2 +8,4 @@ window.app = new Vue({
       rangeValue: [25,75],
+      min: 0,
+      max: 100,
       ticks: [1, 2, 3],
@@ -10,0 +12,0 @@ tickLabels: ['One', 'Two', 'Three'],

No alert changes

Improved metrics

Lines of code

532

increased by7.04%

Number of lines in readme file

92

increased by3.37%

Worsened metrics

Total package byte prevSize

439386

decreased by-0.28%

No dependency changes