How options are supposed to work?

[hfalucas]

How options are supposed to work?

[hfalucas]

Hello @YakovL,

By the examples, it seems that you are using SimpleBar Vue instead of this package (Vue SimpleBar).

If you want to use this package you can pass options like this:

<template>
    <vue-simplebar :options="{autoHide: false, direction: 'rtl'}">
        <p> Your scrollable content goes here. </p>
    </vue-simplebar>
</template>

<script>
import { VueSimplebar } from 'vue-simplebar'
export default {
    components: { VueSimplebar }
}
</script>

<style src="vue-simplebar/dist/vue-simplebar.css"/>

[YakovL]

ah, right, that was confusing. Thanks! I've "re"nstalled Vue SimpleBar instead of SimpleBar Vue, autoHide works this way indeed, but direction doesn't work for some reason. Any ideas?

Also, I've noticed a couple of issues to be reported separately: Unable to preventDefault inside passive event listener invocation. errors in console on each ~mousedown on scrollbar and also unlike SimpleBar Vue, Vue SimpleBar doesn't seem to get updated with vue-cli-service serve when I change options in template, I have to manually reload the page.

[hfalucas]

After some digging in the official package found out the direction option seems to be applied only if the data-simplebar-direction attribute is present in the HTML. I guess for that option, in particular, you'll need to declare specifically on the element as data attribute 🤷‍♂️.

// JS
<vue-simplebar id="scroller" data-simplebar-direction="rtl" :options="{autoHide: false}">
    <p> Your scrollable content goes here. </p>
</vue-simplebar>

// CSS
#scroller {
  direction: rtl;
}

You can try and open an issue on the official repository and state that direction option has no effect if passed in the initialization object, I believe there's not much I can do about that on my side.

About the other issues:

• Unable to preventDefault inside passive event listener invocation.
  I can't seem to reproduce this. Which browser are you using, can you provide a simple fiddle?

• Hot Reload with vue-cli-service serve
  Haven't used it, will try to take a look at it this weekend and see what happens

[YakovL]

Right, thanks. Will be cool if you add this quirk about options into readme

Regarding "Unable to preventDefault inside passive event listener invocation": I get this in both Vivaldi (Chromium-based) and Chrome; regarding a fiddle.. stackblitz.com doesn't seem to support Vue, are you aware of a simple way to create a service with the necessary bits (Vue, Vue SimpleBar, dependencies?)