Simplebar + Vue3

Describe the bug Uncaught TypeError: can't access property "_c", _vm._self is undefined => simplebar-vue.esm.js:38

To Reproduce Steps to reproduce the behavior:

1. yarn add simplebar-vue
2. add import simplebar from ‘simplebar-vue’;
3. add import ‘simplebar/dist/simplebar.min.css’;
4. add simplebar to components
5. add tag <simplebar></simplebar> around my scolled content
6. start server

Your environment

Software	Version(s)
SimpleBar	^1.6.0
Vue	^3.0.0
Browser	Firefox Developer 87.0b9 (64 bits)
Operating System	macOS Big Sur 11.2.3 (20D91)

[Grsmto]

If anyone wants to update the PR with support for Vue 3 I would be happy to release that!

[propanto]

I remove the rtl

<template>
  <component :is="tag" ref="simplebarElement">
    <div class="simplebar-wrapper">
      <div class="simplebar-height-auto-observer-wrapper">
        <div class="simplebar-height-auto-observer" />
      </div>
      <div class="simplebar-mask">
        <div class="simplebar-offset">
          <div
            class="simplebar-content-wrapper"
            ref="scrollElement"
            v-on="{...($attrs.scroll && { scroll: $attrs.scroll })}"
          >
            <div class="simplebar-content mr-1.5" ref="contentElement">
              <slot></slot>
            </div>
          </div>
        </div>
      </div>
      <div class="simplebar-placeholder" />
    </div>
    <div class="simplebar-track simplebar-horizontal" :style="`--track-color: ${trackColor}`">
      <div class="simplebar-scrollbar"/>
    </div>
    <div class="simplebar-track simplebar-vertical" :style="`--track-color: ${trackColor}`">
      <div class="simplebar-scrollbar"/>
    </div>
  </component>
</template>

<script>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import SimpleBar from 'simplebar'

export default defineComponent({
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    trackColor: {
      type: String,
      default: 'black'
    }
  },
  setup(props) {
    const simplebar = ref(null)
    const simplebarElement = ref(null)
    const scrollElement = ref(null)
    const contentElement = ref(null)

    onMounted(() => {
      const options = SimpleBar.getOptions(simplebarElement.value.attributes)
      simplebar.value = new SimpleBar(simplebarElement.value, options)
    })

    onUnmounted(() => simplebar.value.unMount())

    return {
      simplebar,
      simplebarElement,
      scrollElement,
      contentElement,
      trackColor,
    }
  }
})
</script>

<style scoped>
  [data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
  }

  .simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit;
  }

  .simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0;
  }

  .simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }

  .simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
    width: auto;
    max-width: 100%; /* Not required for horizontal scroll to trigger */
    max-height: 100%; /* Needed for vertical scroll to trigger */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .simplebar-content-wrapper::-webkit-scrollbar,

  .simplebar-content:before,
  .simplebar-content:after {
    content: " ";
    display: table;
  }

  .simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none;
  }

  .simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0;
  }

  .simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }

  .simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  [data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  [data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all;
  }

  .simplebar-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 10px;
  }

  .simplebar-scrollbar:before {
    position: absolute;
    content: "";
    background: var(--track-color, black);
    border-radius: 7px;
    left: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity 0.2s linear;
  }

  .simplebar-scrollbar.simplebar-visible:before {
    /* When hovered, remove all transitions from drag handle */
    opacity: 0.5;
    transition: opacity 0s linear;
  }

  .simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px;
  }

  .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px;
  }

  .simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px;
  }

  .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px;
  }

  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto;
  }
</style>