fix: force kebab-case event names

Author: pimlie

README.md

@@ -44,12 +44,15 @@ If the change (and input) event should be triggered when programmatically settin
 
 See [bootstrap-slider](https://github.com/seiyria/bootstrap-slider) for a full list of options
 
+> :exclamation: When listening to slider events, listen to the kebab-case'd event name and not the camelCase'd. E.g. listen for `@slide-start` and not for `@slideStart`
+
+
 ## Example
 
 ```html
 <template>
   <div>
-    <b-form-slider :value="value"></b-form-slider>
+    <b-form-slider :value="value" @slide-start="slideStart" @slide-stop="slideStop"></b-form-slider>
     <p>Slider has value {{ value }}</p>
   </div>
 </template>
@@ -60,6 +63,14 @@ export default {
     return {
       value: 5
     }
+  },
+  methods: {
+    slideStart () {
+      console.log('slideStarted')
+    },
+    slideStop () {
+      console.log('slideStopped')
+    }
   }
 }
 </script>

example.html

@@ -16,7 +16,7 @@ <h1>Vue.js Bootstrap Slider demo</h1>
 
     <div id="app">
       <h1>Basic slider</h1>
-      <b-form-slider ref="basic" v-model="basicValue" :min="0" :max="100" trigger-change-event></b-form-slider>
+      <b-form-slider ref="basic" v-model="basicValue" :min="0" :max="100" trigger-change-event @slide-start="slideStart"></b-form-slider>
       <p>Value of slider is {{ basicValue }}</p>
 
       <h1>Vertical slider</h1>
@@ -62,6 +62,11 @@ <h1>Range highlighted slider</h1>
             { 'start': 95, 'end': 119, 'class': 'primary-slider' }
           ]
         }
+      },
+      methods: {
+        slideStart: function () {
+          console.log('slideStarted')
+        }
       }
     })
   </script>

lib/form-slider.js

@@ -1,4 +1,5 @@
 import Slider from 'bootstrap-slider'
+import camelCase from 'lodash.camelcase'
 import snakeCase from 'lodash.snakecase'
 import throttle from 'lodash.throttle'
 import props from './properties'
@@ -44,11 +45,11 @@ export default {
       this.bindEvents()
     }, 10),
     bindEvents() {
-      const events = ['slide', 'slideStart', 'slideStop', 'change', 'slideEnabled', 'slideDisabled']
+      const events = ['slide', 'slide-start', 'slide-stop', 'change', 'slide-enabled', 'slide-disabled']
       events.forEach((event) => {
         // only bind the event if the event is bound to us
-        if (event === 'change' || this._events[event]) {
-          this.slider.on(event, (value) => {
+        if (event === 'change' || this.$listeners[event]) {
+          this.slider.on(camelCase(event), (value) => {
             if (this.debounce > 0) {
               const now = new Date().getTime()
               if (this.lastEvent[event] !== null && now <= this.lastEvent[event] + this.debounce) {

tests/fixtures/form-slider/demo.html renamed to tests/fixtures/form-slider.html

@@ -22,8 +22,8 @@ window.Vue = Vue
 Vue.use(VueBootstrapSlider)
 
 export function loadFixture(name) {
-  const template = readFile(`${name}/demo.html`)
-  const js = readFile(`${name}/demo.js`)
+  const template = readFile(`${name}.html`)
+  const js = readFile(`${name}.js`)
 
   return async () => {
     // Mount template